@xtdev/xt-miniprogram-ui 1.2.41 → 1.2.43

package/libs/xt-date-picker-loop/index.js

@@ -1,18 +1,22 @@
 /*
  * @Author: Mr.Hu
  * @Date: 2023-12-29 09:48:47
- * @Description: 日期组件-js逻辑
+ * @Description: 日期组件-支持上拉下拉循环选择
  * @LastEditors: Mr.Hu
  */
+let LASTMONTH = null; // 用于储存上一次选中的月份
 // 获取当前月份的天数
 const getDaysInMonth = (year, month) => {
   const daysInMonth = new Date(year, month, 0).getDate();
   return daysInMonth;
-}
+};
 // 深拷贝
 const deepClone = (val) => {
-  if (!val) return null;
-  const isObject = (obj) => Object.prototype.toString.call(obj) === '[object object]';
+  if (!val) {
+    return null;
+  }
+  const isObject = (obj) =>
+    Object.prototype.toString.call(obj) === "[object object]";
   let newResult = Array.isArray(val) ? [] : {};
   for (const key in val) {
     if (Object.prototype.hasOwnProperty.call(val, key)) {
@@ -20,12 +24,12 @@ const deepClone = (val) => {
     }
   }
   return newResult;
-}
+};
 // 获取默认时间
 const getDefaultDate = () => {
   const now = new Date();
-  return `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`;
-}
+  return `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
+};
 // 查找数组中第二个出现的元素下标
 const findSecondIndexOf = (arr, predicate) => {
   const firstIndex = arr.findIndex(predicate);
@@ -34,8 +38,8 @@ const findSecondIndexOf = (arr, predicate) => {
   }
   // 从第一个匹配项的下一个位置继续查找
   return arr.slice(firstIndex + 1).findIndex(predicate);
-}
- 
+};
+
 Component({
   behaviors: [],
   properties: {
@@ -47,92 +51,104 @@ Component({
     // 弹窗标题
     title: {
       type: String,
-      value: '日期筛选'
+      value: "日期筛选",
     },
     // 日期选择器模式 date 年月日选择 dateRange 时间范围选择 yearMonth 年月
     type: {
       type: String,
-      value: 'dateRange',
+      value: "dateRange",
       observer: function (value) {
-        this.setData({filtType: value})
-      }
+        this.setData({ filtType: value });
+      },
     },
     // 最小可选日期
     minDate: {
       type: String,
-      value: '1990-1-1'
+      value: "1990-1-1",
     },
     // 最大可选日期
     maxDate: {
       type: String,
-      value: ''
+      value: "",
     },
     // 当前时间
     currentDate: {
       type: String,
-      value: ''
+      value: "",
     },
     // 展示切换按钮
     showChangeTab: {
       type: Boolean,
-      value: false
+      value: false,
     },
     // 确认按钮文字
     confirmButtonText: {
       type: String,
-      value: '确认'
+      value: "确认",
     },
     // 取消按钮文字
     cancelButtonText: {
       type: String,
-      value: '重置'
-    }
+      value: "重置",
+    },
   },
   data: {
     years: [], // 年份数组
     months: [], // 月份数组
     days: [], // 天份数组
     dateArr: [9999, 1, 1], // 下拉数组下标
-    dateValue: '', // 选中的日期值
-    dateStr: '', // 选中的日期显示字符
+    dateValue: "", // 选中的日期值
+    dateStr: "", // 选中的日期显示字符
     startDateArr: [], // 开始日期数组下标
-    startDateValue: '', // 开始日期选中值
-    startDateStr: '', // 开始日期字符
+    startDateValue: "", // 开始日期选中值
+    startDateStr: "", // 开始日期字符
     endDateArr: [], // 结束日期数组下标
-    endDateValue: '', // 结束日期选中值
-    endDateStr: '', // 结束日期字符
-    defaultDate: '', // 默认日期（组件接收的|当前时间）
-    checkedType: 'start', // 当前选择的日期类型
+    endDateValue: "", // 结束日期选中值
+    endDateStr: "", // 结束日期字符
+    defaultDate: "", // 默认日期（组件接收的|当前时间）
+    checkedType: "start", // 当前选择的日期类型
     clickedEnd: false, // 点击结束时间
-    filtType: 'dateRange', // 选择器模式
+    filtType: "dateRange", // 选择器模式
+    btnDisabled: false, // 按钮禁用
+    newDaysArr: [], // 新的天数数组列表，储存拖动之后的天数数组值，用于拖动结束后更新
+    newDateArr: [], // 新的选中值，储存拖动之后当前选中的值，用于拖动结束后更新
     typeEnums: {
-      date: '按日筛选',
-      dateRange: '按月筛选',
+      date: "按日筛选",
+      dateRange: "按月筛选",
     },
-    indicatorSyle: 'font-size: 40rpx;font-weight: 800;height: 60px'
+    indicatorSyle: "font-size: 40rpx;font-weight: 800;height: 60px",// 自定义样式
   },
   lifetimes: {
-    created() {
-    },
+    created() {},
     async attached() {
       await this.initPickerArr();
       this.setDefaultDate();
-      await this.handelDays('', true);
-    }
+      this.handelDays("", true);
+    },
   },
   methods: {
     // 初始化日期数组
     initPickerArr(curSelDate, dateValue) {
-      const { minYear, maxYear, minMonth,
-        maxMonth, minDay, maxDay,
-        selYearColum, selMonthColum, selDayColum } = this.getMinAndMaxDate(curSelDate, dateValue);
-      return new Promise(resolve => {
-        if (selDayColum){
+      const {
+        minYear,
+        maxYear,
+        minMonth,
+        maxMonth,
+        minDay,
+        maxDay,
+        selYearColum,
+        selMonthColum,
+        selDayColum,
+      } = this.getMinAndMaxDate(curSelDate, dateValue);
+      return new Promise((resolve) => {
+        if (selDayColum) {
           resolve();
           return;
         }
-        const years = [], months = [], days = [];
-        
+        const years = [],
+          months = [],
+          days = [];
+
         for (let i = minYear; i <= maxYear; i++) {
           years.push(i);
         }
@@ -144,37 +160,55 @@ Component({
         }
         if (curSelDate) {
           this.setData({
-            months
-          })
-        } else if (curSelDate && selMonthColum) {
+            months,
+          });
+        } else if (selMonthColum) {
           this.setData({
-            days
-          })
+            days,
+          });
         } else {
           this.setData({
             years,
             months,
-            days
-          })
+            days,
+          });
         }
         resolve();
-      })
+      });
     },
     // 获取最小最大年月日, 当前所选择的列
     getMinAndMaxDate(curSelDate, dateValue) {
-      let { data: { minDate, maxDate, currentDate, dateArr } } = this;
+      let {
+        data: { minDate, maxDate, currentDate, dateArr },
+      } = this;
       currentDate = currentDate || getDefaultDate();
-      let minYear, maxYear, minMonth, maxMonth, minDay, maxDay = 31; 
-      const selYearColum = dateValue && dateArr ? dateValue[0] !== dateArr[0] : false; // 选择的是年份列
-      const selMonthColum = dateValue && dateArr ? dateValue[1] !== dateArr[1] : false; // 选择的是月份列
-      const selDayColum = dateValue && dateArr ? dateValue[2] !== dateArr[2] : false; // 选择的是日份列
-      const curDateArr = this.transformToArr(curSelDate ? curSelDate : currentDate); //当前日期数组
-      const curYear = curDateArr[0], curMonth= curDateArr[1], curDay = curDateArr[2];
+      let minYear,
+        maxYear,
+        minMonth,
+        maxMonth,
+        minDay,
+        maxDay = 31;
+      const selYearColum =
+        dateValue && dateArr ? dateValue[0] !== dateArr[0] : false; // 选择的是年份列
+      const selMonthColum =
+        dateValue && dateArr ? dateValue[1] !== dateArr[1] : false; // 选择的是月份列
+      const selDayColum =
+        dateValue && dateArr ? dateValue[2] !== dateArr[2] : false; // 选择的是日份列
+      const curDateArr = this.transformToArr(
+        curSelDate ? curSelDate : currentDate
+      );
+      // 当前日期数组
+      const curYear = curDateArr[0],
+        curMonth = curDateArr[1],
+        curDay = curDateArr[2];
       if (minDate && minDate.length) {
         const minDateArr = this.transformToArr(minDate);
         minYear = Number(minDateArr[0]);
-        minMonth = (curYear && curYear == minDateArr[0]) ? minDateArr[1] : 1;
-        minDay = (curYear && curYear == minDateArr[0] && curMonth == minDateArr[1]) ? minDateArr[2] : 1;
+        minMonth = curYear && curYear == minDateArr[0] ? minDateArr[1] : 1;
+        minDay =
+          curYear && curYear == minDateArr[0] && curMonth == minDateArr[1]
+            ? minDateArr[2]
+            : 1;
       } else {
         minYear = 1990;
         minMonth = 1;
@@ -183,45 +217,86 @@ Component({
       if (maxDate && maxDate.length) {
         const maxDateArr = this.transformToArr(maxDate);
         maxYear = maxDateArr[0];
-        maxMonth = (curYear && curYear == maxDateArr[0]) ? maxDateArr[1] : 12;
-        maxDay = (curYear && curYear == maxDateArr[0] && curMonth == maxDateArr[1]) ? maxDateArr[2] : 31;
+        maxMonth = curYear && curYear == maxDateArr[0] ? maxDateArr[1] : 12;
+        maxDay =
+          curYear && curYear == maxDateArr[0] && curMonth == maxDateArr[1]
+            ? maxDateArr[2]
+            : 31;
       } else {
         maxYear = new Date().getFullYear();
         maxMonth = 12;
-        maxDay = getDaysInMonth(curYear, curMonth);;
+        maxDay = getDaysInMonth(curYear, curMonth);
       }
-      return { minYear, maxYear, minMonth, maxMonth, minDay, maxDay, curYear, curMonth, curDay, selYearColum, selMonthColum, selDayColum };
+      return {
+        minYear,
+        maxYear,
+        minMonth,
+        maxMonth,
+        minDay,
+        maxDay,
+        curYear,
+        curMonth,
+        curDay,
+        selYearColum,
+        selMonthColum,
+        selDayColum,
+      };
     },
     // 处理传入日期格式
     transformToArr(dateStr) {
-      if (!dateStr) return null;
-      const dateArr = dateStr.split('-');
-      if (!dateArr.length) return null;
+      if (!dateStr) {
+        return null;
+      }
+      const dateArr = dateStr.split("-");
+      if (!dateArr.length) {
+        return null;
+      }
       return dateArr;
     },
     // 设置默认年月日
     setDefaultDate() {
       const now = new Date();
-      let { data: { dateValue, currentDate, dateStr, dateArr, defaultDate, minDate } } = this;
+      let {
+        data: {
+          dateValue,
+          currentDate,
+          dateStr,
+          dateArr,
+          defaultDate,
+          minDate,
+        },
+      } = this;
       currentDate = currentDate || getDefaultDate();
-      let curDateArr = this.transformToArr(currentDate); //当前日期数组
+      let curDateArr = this.transformToArr(currentDate); // 当前日期数组
       const curYear = curDateArr[0];
-      const curMonth= curDateArr[1];
+      const curMonth = curDateArr[1];
       const curDay = curDateArr[2];
       const minDateArr = this.transformToArr(minDate); // 最小可选日期数组
       const defaultYear = minDateArr ? minDateArr[0] : 1990;
-      const defaultMonth = (minDateArr && curYear == minDateArr[0]) ? minDateArr[1] : 1;
-      const defaultDay = (minDateArr && curYear == minDateArr[0] && curMonth == minDateArr[1]) ? minDateArr[2] : 1;
+      const defaultMonth =
+        minDateArr && curYear == minDateArr[0] ? minDateArr[1] : 1;
+      const defaultDay =
+        minDateArr && curYear == minDateArr[0] && curMonth == minDateArr[1]
+          ? minDateArr[2]
+          : 1;
       if (curDateArr && curDateArr.length) {
         // 如果有设置当前日期，则数组下标选中当前日期
         dateStr = `${curYear}年${curMonth}月${curDay}日`;
-        dateArr = [curYear - defaultYear,  curMonth - defaultMonth, curDateArr[2] - defaultDay];
+        dateArr = [
+          curYear - defaultYear,
+          curMonth - defaultMonth,
+          curDateArr[2] - defaultDay,
+        ];
         dateValue = `${curYear}-${curMonth}-${curDay}`;
       } else {
         // 如果有设置当前日期，则数组下标默认选中当前
-        dateStr = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`
-        dateArr = [now.getFullYear() - 1990, now.getMonth(), now.getDate() - 1 ];
-        dateValue = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
+        dateStr = `${now.getFullYear()}年${
+          now.getMonth() + 1
+        }月${now.getDate()}日`;
+        dateArr = [now.getFullYear() - 1990, now.getMonth(), now.getDate() - 1];
+        dateValue = `${now.getFullYear()}-${
+          now.getMonth() + 1
+        }-${now.getDate()}`;
       }
       // 储存当前传入的原始值
       defaultDate = JSON.parse(JSON.stringify(dateValue));
@@ -232,194 +307,240 @@ Component({
         defaultDate,
         startDateArr: dateArr,
         startDateStr: dateStr,
-        startDateValue: dateValue
+        startDateValue: dateValue,
       });
     },
     // 处理当前月的天数
     handelDays(value, isInitDate = false) {
-      return new Promise(resolve => {
-        let { data: { days, dateArr, years, months, minDate, maxDate } } = this;
-        // 如果没有默认值
-        if (!value) {
-          const { minYear } = this.getMinAndMaxDate();
-          let { data: { currentDate } } = this;
-          currentDate = currentDate || getDefaultDate();
-          value = this.transformToArr(currentDate); //当前日期数组
-          value = [value[0] - minYear, value[1] - 1, value[2] - 1]
+      let {
+        data: { days, dateArr, years, months, minDate, maxDate, dateValue },
+      } = this;
+      // 如果没有默认值
+      if (!value) {
+        const { minYear } = this.getMinAndMaxDate();
+        let {
+          data: { currentDate },
+        } = this;
+        currentDate = currentDate || getDefaultDate();
+        value = this.transformToArr(currentDate); // 当前日期数组
+        value = [value[0] - minYear, value[1] - 1, value[2] - 1];
+      }
+      const selYear = years[value?.[0]],
+        selMonth = months[value?.[1]],
+        selDay = days[value?.[2]];
+      let {
+        minYear,
+        minMonth,
+        maxMonth,
+        minDay,
+        maxDay,
+        selYearColum,
+        selMonthColum,
+        selDayColum,
+      } = this.getMinAndMaxDate(`${selYear}-${selMonth}-${selDay}`, value);
+      // 获取当前日期数组，当前选中日期值
+      let newDaysArr = days,
+        newDateArr = value;
+      /****** 处理月份数组下拉列表 start******/
+      // 1.后面插入：如果当前选中的是月份，并且是接近最大月，并且当前月份后面没有重复月份，处理月份下拉数组
+      const isMonthLastColum =
+        selMonth >= maxMonth - 3 && (selMonthColum || selYearColum);
+      if (isMonthLastColum || (selMonth >= maxMonth - 3 && isInitDate)) {
+        for (let i = minMonth; i <= maxMonth; i++) {
+          months.push(i);
         }
-        const selYear = years[value?.[0]],
-          selMonth = months[value?.[1]],
-          selDay = days.length > value?.[2] + 1 ? value?.[2] + 1 : days.length;
-        let { minYear, minMonth, maxMonth, minDay, maxDay, selYearColum, selMonthColum, selDayColum } = this.getMinAndMaxDate(`${selYear}-${selMonth}-${selDay}`, value);
-        // 获取当前日期数组，当前选中日期值
-        let newDaysArr = days, newDateArr = value;
-        // 如果所选天数组下标大于当月天数, 并且当前是切换月份
-        if (value && value[2] >= maxDay && selMonthColum){
-          newDateArr = [newDateArr[0], value[1], maxDay - 1]
+        this.setData({
+          months,
+        });
+      }
+      // 2.前面插入：如果当前选中的是月份，并且是接近最小月，并且当前月份前面没有重复月份，处理月份下拉数组
+      const isMonthFirstColum =
+        selMonth <= maxMonth - 3 && newDateArr[1] < maxMonth && selMonthColum; // 当前选中的第一月
+      if (isMonthFirstColum || (selMonth <= maxMonth - 3 && isInitDate)) {
+        for (let i = maxMonth; i >= minMonth; i--) {
+          months.unshift(i);
         }
-        /** 处理月数组下拉列表 **/
-        // 1.后面插入：如果当前选中的是月份，并且是接近最大月，并且当前月份后面没有重复月份，处理月份下拉数组
-        const isMonthLastColum = selMonth >= maxMonth - 6 && (selMonthColum || selYearColum);
-        if (isMonthLastColum  || (selMonth >= maxMonth - 6 && isInitDate)) {
-          for (let i = minMonth; i <= maxMonth; i++) {
-            months.push(i);
+        newDateArr = [newDateArr[0], newDateArr[1] + maxMonth, newDateArr[2]];
+        this.setData({
+          months,
+        });
+      }
+      /****** 处理月份数组下拉列表 end******/
+
+      /****** 处理天数下拉列表 start******/
+      const firstIndex = findSecondIndexOf(newDaysArr, (el) => el == 1);
+      // 1.切换月份，更新天数组列表
+      if (selMonthColum || selYearColum) {
+        const newArray = [];
+        for (let j = 1; j <= 2; j++) {
+          for (let i = minDay; i <= maxDay; i++) {
+            newArray.push(i);
           }
-          this.setData({
-            months,
-          })
         }
-        // 2.前面插入：如果当前选中的是月份，并且是接近最小月，并且当前月份前面没有重复月份，处理月份下拉数组
-        const isMonthFirstColum = selMonth == minMonth && newDateArr[1] < maxMonth && selMonthColum; // 当前选中的第一月
-        if (isMonthFirstColum || (selMonth == minMonth && isInitDate)) {
-          for (let i = maxMonth; i >= minMonth; i--) {
-            months.unshift(i);
-          }
-          newDateArr = [
-            newDateArr[0],
-            newDateArr[1] + maxMonth,
-            newDateArr[2]
-          ];
-          this.setData({
-            months
-          })
+        newDaysArr = newArray; // 重置当前月的天数组列表
+        const beforeMonth = LASTMONTH; // 获取上次选择月数
+        // 获取切换之前月选中信息
+        const prevSelDateParams = this.getMinAndMaxDate(
+          `${selYear}-${beforeMonth}-${selDay}`
+        );
+        // 如果选中的是当月第一天，处理当前选中的下标逻辑
+        if (selDay == 1) {
+          const valueDay = maxDay - prevSelDateParams.maxDay;
+          newDateArr = [newDateArr[0], newDateArr[1], newDateArr[2] + valueDay];
         }
-        // console.log('newDateArr:', newDateArr);
-        // console.log('newMonths:', months);
-        /** 处理天数下拉列表 **/
-        const firstIndex = findSecondIndexOf(newDaysArr, el => el == 1 );
-        debugger;
-        // 1.选择最后一天，再切换月，处理天数下拉数组，且处理2月闰月bug
-        if (selMonthColum && (selDay >= maxDay - 1 || [28, 29].includes(selDay))) {
-          console.log(111);
-          // 如果当前有多余数据，则进行删除
-          if (newDaysArr.length > 58) {
-            newDaysArr = newDaysArr.slice(firstIndex + 1, newDaysArr.length)
-          }
-          const apendDays = [];
-          for (let i = minDay; i <= maxDay; i++) {
-            apendDays.push(i);
-          }
-          newDaysArr = apendDays.concat(newDaysArr);
+        // 如果选中的是当月最后一天，处理当前选中的下标逻辑
+        if (selDay == prevSelDateParams.maxDay) {
+          // 获取当前月天数
+          const curSelDateParams = this.getMinAndMaxDate(
+            `${selYear}-${selMonth}-${selDay}`
+          );
           newDateArr = [
             newDateArr[0],
             newDateArr[1],
-            maxDay - 1
+            curSelDateParams.maxDay - 1,
           ];
         }
-        // 2.如果当前选中的是天数，并且是接近最大天数，并且当前天数后面没有重复天数，处理天数下拉数组
-        const isDayLastColum = selDayColum  && selDay >= newDaysArr.length - 6;
-        // 获取上一个月的天数
-        debugger;
-        const { maxDay: nextMonthMaxDay } = this.getMinAndMaxDate(`${selYear}-${selMonth + 1}-${selDay}`);
-        if (isDayLastColum || (isInitDate && selDay >= newDaysArr.length - 6)) {
-          console.log(222);
-          if (newDaysArr.length > 58) {
-            newDaysArr = newDaysArr.slice(firstIndex + 1, newDaysArr.length);
-          }
-          for (let i = minDay; i <= nextMonthMaxDay; i++) {
-            newDaysArr.push(i);
-          }
+      }
+      // 天数列表上拉循环选择--后面插入
+      // 前选中天数列表，选中的接近最大天数，并且当前天数后面没有重复天数，处理天数下拉数组
+      const isDayLastColum = selDayColum && selDay >= maxDay - 3;
+      // 获取上一个月的天数
+      if (isDayLastColum || (isInitDate && selDay >= maxDay - 3)) {
+        // 如果当前选中的不是天数组最后三条数据，重新组装
+        if (
+          newDaysArr.length > 2 * maxDay &&
+          value[2] <= newDaysArr.length - 3
+        ) {
+          newDaysArr = newDaysArr.slice(firstIndex + 1, newDaysArr.length);
         }
-        // 天数列表上拉循环选择--前面插入
-        // 1.当前选中天数列表，选中的是最小天数，并且设置的天数小于最大天数
-        const isDayFirstColum = selDay == minDay && newDateArr[2] < maxDay && selDayColum; // 当前选中的第一日
-        const { maxDay: prevMonthMaxDay } = this.getMinAndMaxDate(`${selYear}-${selMonth - 1}-${selDay}`);
-        // 2. 当前初始日期前面设置添加循环选择
-        if (isDayFirstColum || (isInitDate && selDay == minDay)) {
-          for (let i = prevMonthMaxDay; i >= minDay; i--) {
-            newDaysArr.unshift(i);
-          }
-          this.setData({
-            days: newDaysArr
-          });
-          let valueDay = Number(newDateArr[2] + prevMonthMaxDay);
-          newDateArr = [
-            newDateArr[0],
-            newDateArr[1],
-            valueDay
-          ];
+        for (let i = minDay; i <= maxDay; i++) {
+          newDaysArr.push(i);
         }
-        // 天数选择下拉循环选择
-        console.log('newDateArr:', newDateArr);
-        console.log('newDaysArr:', newDaysArr);
-        // 解决回弹动画延时问题
-        if ((isMonthFirstColum || isDayFirstColum) && !this.data.isRset) {
-          setTimeout(() => {
-            this.setData({
-              days: newDaysArr,
-              dateArr: newDateArr
-            });
-            resolve();
-          }, 1500);
-        } else {
-          this.setData({
-            days: newDaysArr,
-            dateArr: newDateArr,
-            isRset: false
-          })
-          resolve();
+      }
+      // 天数列表上拉循环选择--前面插入
+      // 当前选中天数列表，选中的接近最小天数，并且设置的天数小于最大天数
+      const isDayFirstColum =
+        selDay <= minDay + 3 && newDateArr[2] < maxDay && selDayColum; // 当前选中的第一日
+      if (isDayFirstColum || (isInitDate && selDay <= minDay + 3)) {
+        for (let i = maxDay; i >= minDay; i--) {
+          newDaysArr.unshift(i);
         }
+        let valueDay = newDateArr[2] + maxDay;
+        newDateArr = [newDateArr[0], newDateArr[1], valueDay];
+        this.setData({
+          days: newDaysArr,
+          dateArr: newDateArr
+        }, () => {
+          this.setData({
+            dateArr: newDateArr
+          });
+        });
+      }
+      /****** 处理天数循环选择列表 end******/
+
+      LASTMONTH = selMonth; // 储存当前选中的月份，为上次选中的月份
+      // 处理快速拉动引发的bug
+      if (newDateArr[2] > newDaysArr.length) {
+        newDateArr = [newDateArr[0], newDateArr[1], newDaysArr.length - 1];
+      }
+      // 天数选择下拉循环选择
+      this.setData({
+        newDaysArr,
+        newDateArr,
       });
     },
+    // 监听滚动开始，禁用确认按钮
+    bindPickstart(e) {
+      this.setData({
+        btnDisabled: true
+      });
+    },
+    // 监听滚动结束：滚动结束，更新选中时间
+    bindPickend(e) {
+      const {
+        data: { newDaysArr, newDateArr },
+      } = this;
+      this.setData({
+        days: newDaysArr,
+        dateArr: newDateArr,
+        btnDisabled: false
+      });
+      this.updateChangeValue();
+    },
     // 滑动下拉列表
     async bindChange(e) {
-      console.log('bindChange:', e);
       const value = e?.detail?.value;
-      // const { data: { years: year, months: month, days: day } } = this;
-      // // 渲染下拉列表
-      // await this.initPickerArr(`${year[value[0]]}-${month[value[1]]}-${day[value[2]]}`, value);
       // 处理每月可选天数
-      await this.handelDays(value);
-      let { data: {
-        years, months, days,
-        dateValue, dateStr, dateArr,
-        filtType, checkedType,
-        startDateArr, endDateArr,
-        startDateValue, endDateValue,
-        startDateStr, endDateStr
-      } } = this;
-      dateStr = `${years[dateArr[0]]}年${months[dateArr[1]]}月${days[dateArr[2]]}日`;
-      dateValue = `${years[dateArr[0]]}-${months[dateArr[1]]}-${days[dateArr[2]]}`;
-      if (filtType === 'yearMonth') {
+      this.handelDays(value);
+    },
+    // 更新选中的值
+    updateChangeValue() {
+      let {
+        data: {
+          years,
+          months,
+          days,
+          dateValue,
+          dateStr,
+          dateArr,
+          filtType,
+          checkedType,
+          startDateArr,
+          endDateArr,
+          startDateValue,
+          endDateValue,
+          startDateStr,
+          endDateStr,
+        },
+      } = this;
+      dateStr = `${years[dateArr[0]]}年${months[dateArr[1]]}月${
+        days[dateArr[2]]
+      }日`;
+      dateValue = `${years[dateArr[0]]}-${months[dateArr[1]]}-${
+        days[dateArr[2]]
+      }`;
+      if (filtType === "yearMonth") {
         dateStr = `${years[dateArr[0]]}年${months[dateArr[1]]}月`;
         dateValue = `${years[dateArr[0]]}-${months[dateArr[1]]}`;
         // 如果是按年月筛选
         this.setData({
           dateStr,
-          dateValue
+          dateValue,
         });
-      } else if (filtType === 'date') {
+      } else if (filtType === "date") {
         // 如果是按年月日筛选
         this.setData({
           dateStr,
-          dateValue
+          dateValue,
+        });
+      } else if (checkedType === "start") {
+        this.setData({
+          startDateArr: dateArr,
+          startDateStr: dateStr,
+          startDateValue: dateValue,
         });
-      } else if (checkedType === 'start') {
-          this.setData({
-            startDateArr: dateArr,
-            startDateStr: dateStr,
-            startDateValue: dateValue,
-          })
       } else {
         this.setData({
           endDateArr: dateArr,
           endDateStr: dateStr,
           endDateValue: dateValue,
-        })
+        });
       }
     },
     // 更改筛选类型
     changeFiltType() {
-      const { data: { filtType, dateValue, dateStr, dateArr } } = this;
+      const {
+        data: { filtType, dateValue, dateStr, dateArr },
+      } = this;
       this.setData({
-        filtType: filtType === 'date' ? 'dateRange' : 'date',
-      })
-      if (filtType === 'date') {
-        this.setData({ 
+        filtType: filtType === "date" ? "dateRange" : "date",
+      });
+      if (filtType === "date") {
+        this.setData({
           startDateValue: dateValue,
           startDateStr: dateStr,
-          startDateArr: dateArr
-         });
+          startDateArr: dateArr,
+        });
         return;
       }
       this.onReset();
@@ -427,76 +548,93 @@ Component({
     // 切换日期类型
     switchDateType(e) {
       const checkedType = e.currentTarget.dataset.type;
-      const { data: { clickedEnd } } = this;
+      const {
+        data: { clickedEnd },
+      } = this;
       this.setData({
         checkedType,
-        clickedEnd: checkedType === 'end' ? true : clickedEnd
+        clickedEnd: checkedType === "end" ? true : clickedEnd,
       });
       this.showCheckedPicker();
     },
     // 反显选中的日期下拉值
     showCheckedPicker() {
-      let { data: { 
-        startDateValue, endDateValue, checkedType,
-        startDateArr, endDateArr, dateArr,
-        startDateStr, endDateStr
-       } } = this;
-       // 如果当前切换到结束时间选项
-      if (checkedType === 'end') {
+      let {
+        data: {
+          startDateValue,
+          endDateValue,
+          checkedType,
+          startDateArr,
+          endDateArr,
+          dateArr,
+          startDateStr,
+          endDateStr,
+        },
+      } = this;
+      // 如果当前切换到结束时间选项
+      if (checkedType === "end") {
         if (!endDateValue) {
           // 如果当前没有选结束时间
           endDateValue = startDateValue;
           endDateArr = startDateArr;
           endDateStr = startDateStr;
         } else {
-          dateArr = [endDateArr[0],  endDateArr[1], endDateArr[2]]
+          dateArr = [endDateArr[0], endDateArr[1], endDateArr[2]];
         }
       }
-      if (checkedType === 'start') {
-        dateArr = [startDateArr[0],  startDateArr[1], startDateArr[2]]
+      if (checkedType === "start") {
+        dateArr = [startDateArr[0], startDateArr[1], startDateArr[2]];
       }
       this.setData({
         endDateStr,
         endDateValue,
         endDateArr,
-        dateArr
-      })
+        dateArr,
+      });
     },
     // 重置时间
     async onReset() {
-      this.setData({isRset: true});
       this.bindChange();
     },
+    // 关闭选择器
+    async onClose() {
+      this.onReset();
+      this.setData({ show: false });
+    },
     // 确认选择时间
     onConfirm() {
-      const { data: { filtType, dateValue, startDateValue, endDateValue } } = this;
-      let checkedDate;
-      if (filtType === 'date') {
+      const {
+        data: { filtType, dateValue, dateStr, startDateValue, endDateValue },
+      } = this;
+      let pickerDate;
+      if (filtType === "date") {
         // 如果按年月日筛选
-        checkedDate = `${dateValue} 00:00:00`;
-      } else if (filtType === 'yearMonth') {
+        pickerDate = `${dateValue} 00:00:00`;
+      } else if (filtType === "yearMonth") {
         // 如果按年月筛选
-        checkedDate = dateValue;
+        pickerDate = dateValue;
       } else {
         if (!endDateValue) {
           wx.showToast({
-            title: '请选择结束时间',
-            icon: 'none'
-          })
+            title: "请选择结束时间",
+            icon: "none",
+          });
           return;
         }
         if (new Date(startDateValue) > new Date(endDateValue)) {
           wx.showToast({
-            title: '开始时间不能大于结束时间',
-            icon: 'none'
-          })
+            title: "开始时间不能大于结束时间",
+            icon: "none",
+          });
           return;
         }
-        checkedDate = [`${startDateValue} 00:00:00`, `${endDateValue} 23:59:59`];
+        pickerDate = [`${startDateValue} 00:00:00`, `${endDateValue} 23:59:59`];
       }
-      console.log('checkedDate:', checkedDate);
-      this.setData({show: false});
-      this.triggerEvent('getDateValue', checkedDate)
+      this.setData({ show: false });
+      this.triggerEvent("getDateValue", {
+        pickerDate,
+        pickerDateText: dateStr,
+      });
     },
   },
 });

package/libs/xt-date-picker-loop/index.wxml

@@ -31,7 +31,9 @@
       indicator-style="{{indicatorSyle}}"
       immediate-change="{{true}}"
       mask-class="picker-mask"
-      bindchange="bindChange">
+      bindchange="bindChange"
+      bindpickstart="bindPickstart"
+      bindpickend="bindPickend">
       <picker-view-column>
         <view wx:for="{{years}}" wx:key="index" class="picker-item {{dateArr[0] === index ? 'picker-select' : ''}}">
           {{item}}年
@@ -51,7 +53,7 @@
     <!-- 按钮组 -->
     <view class="btns-group">
       <xt-button catchtap="onReset" class="btn-reset">{{cancelButtonText}}</xt-button>
-      <xt-button catchtap="onConfirm" type="main" class="btn-confirm">{{confirmButtonText}}</xt-button>
+      <xt-button catchtap="onConfirm" disabled="{{btnDisabled}}" type="main" class="btn-confirm">{{confirmButtonText}}</xt-button>
     </view>
   </view>
 </view>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtdev/xt-miniprogram-ui",
-  "version": "1.2.41",
+  "version": "1.2.43",
   "description": "",
   "miniprogram": "libs",
   "publishConfig": {