微信小程序 van-popup+van-datetime-picker 时间选择器组件





     
    




Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    picktime: {
      type: String,
      value: '请选择'
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    minDate: new Date((new Date().getFullYear() - 1), 10, 1).getTime(),
    maxDate: new Date((new Date().getFullYear() + 2), 10, 1).getTime(),
    currentDate: new Date().getTime(),
    show: false
  },
  created: function () {

    //组件实例进入页面节点树时执行时的代码, 但是不能在这里使用setData,否则将会报错.
  },
  attached() {
    //组件实例进入页面节点树时执行时的代码, 比如获取本地存储的值等等


  },
  lifetimes: {
    // 组件的生命周期函数,用于声明组件的生命周期
    attached: () => { },
    moved: () => { },
    detached: () => { }
  },
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: () => {

    },
    hide: () => { }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    timeFormat(date, fmt) {
      var o = {
        "M+": date.getMonth() + 1,                 //月份   
        "d+": date.getDate(),                    //日
        "h+": date.getHours(),                   //小时   
        "m+": date.getMinutes(),                 //分   
        "s+": date.getSeconds(),                 //秒   
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度   
        "S": date.getMilliseconds()             //毫秒   
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
     
    },
    showPopup() {
      this.setData({ show: true });
    
    },
    onConfirm(event) {
      var timeValue = this.timeFormat(new Date(event.detail), "yyyy-MM-dd hh:mm");
      this.setData({ picktime: timeValue, show: false });
      var myEventDetail = {
        val: timeValue
      }
      this.triggerEvent('myevent', myEventDetail);
    },
    onCancel() {
      this.setData({ show: false });
    },
    onClose() {
      this.setData({ show: false });
    }
   
  }
})


{
  "component": true,
  "usingComponents": {}
}

引用:

{{currentDate}}

onGetCode: function (e) {

this.setData({

currentDate: e.detail.val

})

}

微信小程序 van-popup+van-datetime-picker 时间选择器组件_第1张图片

你可能感兴趣的:(微信小程序)