微信小程序 vant 封装DatetimePicker时间选择器

效果：

1.在components文件下新建dateTimePicker文件

在index.wxml文件中编写：

<view class="container" bindtap="showPop">
    <van-popup show="{{ isShowpopup }}" bind:close="onClose"
     position="bottom">
 <van-datetime-picker
  type="date"
  value="{{ currentDate }}"
  bind:input="onInput"
  bind:confirm="onConfirm"
  bind:cancel="onCancel"
  min-date="{{ minDate }}"
  formatter="{{ formatter }}"
/>
</van-popup>
</view>

index.json文件中编写方法，属性

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        isShowpopup: {
            type: Boolean,
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        currentDate: new Date().getTime(),
        minDate: new Date(1940, 0, 1).getTime(),
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`;
            }
            if (type === 'month') {
                return `${value}月`;
            }
            return value;
        },
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 出生日期
        showPop(data) {
            this.setData({
                isShowpopup: data
            })
        },
        // 选择日期
        onInput(event) {
            this.setData({
                currentDate: event.detail,
            });
        },
        // 选择日期 确认按钮
        onConfirm(val) {
          let a = this._timeFormat(val.detail);
            // this.setData({
            //     isShowpopup: false
            // })
            this.triggerEvent('showing',{
                selectDate:a,
                isShowpopup: false
            })
        },
        // 取消按钮
        onCancel(){
            this.triggerEvent('canceling',{
                isShowpopup: false
            })
        },
        _timeFormat(time) { // 时间格式化 2019-09-08
            console.log(time,"++")
            var time = new Date(time);
            let year = time.getFullYear();
            let month = time.getMonth() + 1;
            let day = time.getDate();
            let h = time.getHours(); h = h < 10 ? ('0' + h) : h;
            let minutes = time.getMinutes(); minutes = minutes < 10 ? ('0' + minutes) : minutes;					
            return year + '-' + month + '-' + day 
        }

    }
})

使用该组件的页面中引用：

index.json中引用，注册

{
  "usingComponents": {
  "v-dateTimePicker":"../../components/dateTimePicker/index"
  }
}

index .wxml中使用

 <view>
    <v-dateTimePicker id="page" bind:showing="onConfirm"  bind:canceling="onCancel"
     wx:if="{{isShowpopup}}"/>
</view>

index.js文件 定义方法，数据

data中定义：

  birthDate: '请选择出生日期', // 出生日期
  isShowpopup: false,

    showBirthDate() {
        this.setData({
            isShowpopup: true
        })
        // 父组件调用子组件中的方法
        this.selectComponent("#page").showPop('isShowpopup')
    },
    // 确认按钮
    onConfirm(e) {
        this.setData({
            isShowpopup: e.detail.isShowpopup,
            birthDate: e.detail.selectDate
        })
    },
    // 取消按钮
    onCancel(e) {
        this.setData({
            isShowpopup: e.detail.isShowpopup,

        })
    },

完整代码，做一个小记录~