【原生小程序】【vant】年月日日期优化

【原生小程序】【vant】年月日日期优化

步骤一在app.json或index.json中引入组件

"usingComponents": {
  "van-datetime-picker": "@vant/weapp/datetime-picker/index"
}

步骤二，页面使用,与弹出层组件一起使用

<van-popup show="{{ isworkday }}" round position="bottom" bind:close="onClose">
    <van-datetime-picker type="date" title="选择日期" value="{{ currentDate }}" bind:input="onInput" formatter="{{ formatter }}" bind:cancel="onClose" bind:confirm="conFirmstateList" />
</van-popup>

步骤三，js中data中定义变量

 		currentDate: new Date().getTime(),//当前时间
        minDate: new Date().getTime(),//日历的饿最小时间
        formatter(type, value) { //选项格式化函数(type 可能值为 year, month, day, hour, minute)
            if (type === 'year') {
                return `${value}年`;
            }
            if (type === 'month') {
                return `${value}月`;
            }
            if (type === 'day') {
                return `${value}日`;
            }
            return value;
        },

步骤四，获取时间，组件返回的是时间戳，过滤时间

 	//弹窗确定，时间戳变时间  //这个time就是最后的时间了
    conFirmstateList(e) {
        let time=this.activeDate(e.detail)
    },
    //时间戳变时间的方法
    activeDate(date) {
        var oDate = new Date(date),
            oYear = oDate.getFullYear(),
            oMonth = oDate.getMonth() + 1,
            oDay = oDate.getDate(),
            oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
        return oTime
    },
     // 过滤日期
    getzf(num) {
        if (parseInt(num) < 10) {
            num = '0' + num;
        }
        return num;
    },
    

补充

	//弹窗打开
    showwork() {
        this.setData({
            isworkday: true
        })
    },
     //弹窗关闭
    onClose() {
        this.setData({
            isworkday: false
        })
    },