更新记录
1.0.0(2022-07-28)
下载此版本
- 新增日期选择插件
- 支持自定义日期选择范围,将来日期,过去日期
- 支持自定义日期选择显示格式,年月日时分秒,年月日时分等等
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.2.2 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
√ |
× |
× |
× |
× |
使用说明
1. 下载插件
2. 引用插件
import gcDatePicker from '@/components/gc-date-picker/gc-date-picker.vue'
export default {
components: {
'gc-date-picker': gcDatePicker
}
}
3. html
<view class="">
<view class="content">
默认:日期范围 2010 - 2050
</view>
<view class="">
<gc-date-picker @change="change1" :dateVal="defaultDate"></gc-date-picker>
</view>
<view class="content">
过去(显示年月日时分):showSecond="false" nowStatus="past"
</view>
<view class="">
<gc-date-picker @change="change1" :dateVal="defaultDate" nowStatus="past" :showSecond="false"></gc-date-picker>
</view>
<view class="content">
将来(显示年月日时分):showSecond="false" nowStatus="future"
</view>
<view class="">
<gc-date-picker @change="change1" :dateVal="defaultDate" nowStatus="future" :showSecond="false"></gc-date-picker>
</view>
<view class="content">
过去(只显示年月日): 2022-07-28
</view>
<view class="">
<gc-date-picker @change="change1" :dateVal="defaultDate" nowStatus="past" :showHour="false" :showMinute="false" :showSecond="false"></gc-date-picker>
</view>
</view>
4. js
export default {
data() {
return {
defaultDate: '', // 默认日期
}
},
created() {
this.defaultDate = this.formateTime()
},
methods: {
// 子组件抛出事件
change1: function(e) {
console.log('日期选择结果', e)
},
// 格式化日期显示
formateTime: function(val) {
var date = new Date()
if (!!val) {
date = new Date(val.replace(/^\s+|\s+$/g, ''))
}
var year = date.getFullYear()
var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)
var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
var h = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
var m = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
return year + '-' + month + '-' + day + ' ' + h + ':' + m
},
}
}
4. 组件传参说明
传参 |
说明 |
默认值 |
dateVal |
当前选中的日期 |
nowStatus |
日期显示范围, past 过去 future 未来 |
yearStart |
开始日期 |
2010 |
yearEnd |
结束日期 |
2050 |
showHour |
是否显示小时 |
true |
showMinute |
是否显示分钟 |
true |
showSecond |
是否显示秒 |
true |