微信小程序----日期时间选择器（自定义时间&&精确到分秒）

目录

页面效果

代码实现 

注意事项

---

页面效果

代码实现 

js 

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

  /**
   * 组件的初始数据
   */
  data: {
    pickerReady: false,
    // pickerShow:true
    // limitStartTime: new Date().getTime()-1000*60*60*24*30,
    // limitEndTime: new Date().getTime(),
    // yearStart:2000,
    // yearEnd:2100
  },
  detached: function () {
    this.setData({
      pickerReady: false,
    });
  },
  attached: function () {
    this.readConfig();
    this.initPick(this.data.config || null);
    this.setData({
      startValue: this.data.startValue,
      endValue: this.data.endValue,
      pickerReady: true,
    });
  },
  ready: function () {},
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 读取并处理配置中的时间限制信息
     * 此函数用于初始化或更新时间选择器的限制范围，以及配置中的其他时间相关参数
     */
    readConfig() {
      // 获取当前时间的时间戳，最大选的范围
      let limitEndTime = new Date().getTime();
      // 计算30天前的时间戳，最小可选择的范围
      let limitStartTime = new Date().getTime() - 1000 * 60 * 60 * 24 * 30;

      // 检查是否存在配置信息
      if (this.data.config) {
        let conf = this.data.config;

        // 如果配置中指定了日期限制，当为数字n时，范围是当前时间的最近n天
        if (typeof conf.dateLimit == "number") {
          limitStartTime =
            new Date().getTime() - 1000 * 60 * 60 * 24 * conf.dateLimit;
        }
        // 如果配置中指定了最小可选，则将其转换为时间戳
        if (conf.limitStartTime) {
          limitStartTime = new Date(
            conf.limitStartTime.replace(/-/g, "/")
          ).getTime();
        }

        // 如果配置中指定了最大可选，则将其转换为时间戳
        if (conf.limitEndTime) {
          limitEndTime = new Date(
            conf.limitEndTime.replace(/-/g, "/")
          ).getTime();
        }

        // 设置数据，包括年份范围、结束日期标志、日期限制和时间列的显示状态
        this.setData({
          yearStart: conf.yearStart || 2000, // 默认开始年份为2000
          yearEnd: conf.yearEnd || 2100, // 默认结束年份为2100
          endDate: conf.endDate || false, // 默认不启用结束日期
          dateLimit: conf.dateLimit || false, // 默认不设置日期限制
          hourColumn:
            conf.column == "hour" ||
            conf.column == "minute" ||
            conf.column == "second", // 根据配置决定是否显示小时列
          minColumn: conf.column == "minute" || conf.column == "second", // 根据配置决定是否显示分钟列
          secColumn: conf.column == "second", // 根据配置决定是否显示秒列
        });
      }

      // 将时间限制的时间戳格式化数组方便循环
      let limitStartTimeArr = formatTime(limitStartTime);
      let limitEndTimeArr = formatTime(limitEndTime);

      // 更新数据，包括时间限制的时间戳和格式化后的时间数组
      this.setData({
        limitStartTime, // 开始时间限制
        limitStartTimeArr, // 开始时间限制数组
        limitEndTime, // 结束时间限制
        limitEndTimeArr, //结束时间限制数组
      });
    },
    //滚动开始
    handlePickStart: function (e) {
      this.setData({
        isPicking: true,
      });
    },
    //滚动结束
    handlePickEnd: function (e) {
      this.setData({
        isPicking: false,
      });
    },
    onConfirm: function () {
      //滚动未结束时不能确认

      if (this.data.isPicking) {
        return;
      }
      let startTime = new Date(this.data.startPickTime.replace(/-/g, "/"));
      let endTime = new Date(this.data.endPickTime.replace(/-/g, "/"));
      if (startTime <= endTime || !this.data.endDate) {
        this.setData({
          startTime,
          endTime,
        });
        let startArr = formatTime(startTime).arr;
        let endArr = formatTime(endTime).arr;
        let format0 = function (num) {
          return num < 10 ? "0" + num : num;
        };

        let startTimeBack =
          startArr[0] +
          "-" +
          format0(startArr[1]) +
          "-" +
          format0(startArr[2]) +
          " " +
          (this.data.hourColumn ? format0(startArr[3]) : "00") +
          ":" +
          (this.data.minColumn ? format0(startArr[4]) : "00") +
          ":" +
          (this.data.secColumn ? format0(startArr[5]) : "00");

        let endTimeBack =
          endArr[0] +
          "-" +
          format0(endArr[1]) +
          "-" +
          format0(endArr[2]) +
          " " +
          (this.data.hourColumn ? format0(endArr[3]) : "00") +
          ":" +
          (this.data.minColumn ? format0(endArr[4]) : "00") +
          ":" +
          (this.data.secColumn ? format0(endArr[5]) : "00");

        let time = {
          startTime: startTimeBack,
          endTime: endTimeBack,
        };

        //触发自定义事件
        this.triggerEvent("setPickerTime", time);
        this.triggerEvent("hidePicker", {});
      } else {
        wx.showToast({
          icon: "none",
          title: "时间不合理",
        });
      }
    },
    hideModal: function () {
      this.triggerEvent("hidePicker", {});
    },
    changeStartDateTime: function (e) {
      let val = e.detail.value;

      this.compareTime(val, "start&