feat(DatePicker): date columns calculation

packages/vant/src/date-picker/DatePicker.tsx

@@ -1,11 +1,9 @@
 import {
   ref,
-  watch,
   computed,
-  nextTick,
   defineComponent,
   type PropType,
-  ExtractPropTypes,
+  type ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -20,13 +18,12 @@ import {
 import {
   times,
   sharedProps,
-  getTrueValue,
   getMonthEndDay,
   pickerInheritKeys,
 } from '../datetime-picker/utils';
 
 // Components
-import { Picker, PickerOption } from '../picker';
+import { Picker } from '../picker';
 
 const currentYear = new Date().getFullYear();
 const [name] = createNamespace('date-picker');
@@ -61,104 +58,105 @@ export default defineComponent({
   emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
-    const formatValue = (value?: Date) => {
+    const currentValues = ref<string[]>([]);
-      if (isDate(value)) {
-        const timestamp = clamp(
-          value.getTime(),
-          props.minDate.getTime(),
-          props.maxDate.getTime()
-        );
-        return new Date(timestamp);
-      }
 
-      return undefined;
+    // const setValue = (type: DatePickerColumnType, newValue: string) => {
+    //   const index = props.columnsType.indexOf(type);
+    //   currentValues.value[index] = newValue;
+    // };
+
+    const getValue = (type: DatePickerColumnType) => {
+      const index = props.columnsType.indexOf(type);
+      return +currentValues.value[index];
     };
 
-    const currentDate = ref(formatValue(props.modelValue));
+    const formatValue = (value: Date) => {
-
+      const timestamp = clamp(
-    const getBoundary = (type: 'max' | 'min', value: Date) => {
+        value.getTime(),
-      const boundary = props[`${type}Date` as const];
+        props.minDate.getTime(),
-      const year = boundary.getFullYear();
+        props.maxDate.getTime()
-      let month = 1;
-      let date = 1;
-
-      if (type === 'max') {
-        month = 12;
-        date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
-      }
-
-      if (value.getFullYear() === year) {
-        month = boundary.getMonth() + 1;
-
-        if (value.getMonth() + 1 === month) {
-          date = boundary.getDate();
-        }
-      }
-
-      return {
-        [`${type}Year`]: year,
-        [`${type}Month`]: month,
-        [`${type}Date`]: date,
-      };
-    };
-
-    const ranges = computed(() => {
-      const { maxYear, maxDate, maxMonth } = getBoundary(
-        'max',
-        currentDate.value || props.minDate
-      );
-      const { minYear, minDate, minMonth } = getBoundary(
-        'min',
-        currentDate.value || props.minDate
       );
 
+      const date = new Date(timestamp);
       return props.columnsType.map((type) => {
         switch (type) {
           case 'year':
-            return {
+            return String(date.getFullYear());
-              type: 'year',
-              range: [minYear, maxYear],
-            };
           case 'month':
-            return {
+            return padZero(date.getMonth() + 1);
-              type: 'month',
-              range: [minMonth, maxMonth],
-            };
           case 'day':
-            return {
+          default:
-              type: 'day',
+            return padZero(date.getDate());
-              range: [minDate, maxDate],
+        }
-            };
+      });
+    };
+
+    if (props.modelValue) {
+      currentValues.value = formatValue(props.modelValue);
+    }
+
+    const genOptions = (
+      min: number,
+      max: number,
+      type: DatePickerColumnType
+    ) => {
+      const options = times(max - min + 1, (index) => {
+        const value = padZero(min + index);
+        return props.formatter(type, {
+          text: value,
+          value,
+        });
+      });
+      return props.filter ? props.filter(type, options) : options;
+    };
+
+    const genYearOptions = () => {
+      const minYear = props.minDate.getFullYear();
+      const maxYear = props.maxDate.getFullYear();
+      return genOptions(minYear, maxYear, 'year');
+    };
+
+    const isMaxYear = (year: number) => year === props.maxDate.getFullYear();
+    const isMaxMonth = (month: number) =>
+      month === props.maxDate.getMonth() + 1;
+
+    const genMonthOptions = () => {
+      if (isMaxYear(getValue('year'))) {
+        return genOptions(1, props.maxDate.getMonth() + 1, 'month');
+      }
+      return genOptions(1, 12, 'month');
+    };
+
+    const genDayOptions = () => {
+      const year = getValue('year');
+      const month = getValue('month');
+
+      let maxDate = getMonthEndDay(year, month);
+      if (isMaxYear(year) && isMaxMonth(month)) {
+        maxDate = props.maxDate.getDate();
+      }
+
+      return genOptions(1, maxDate, 'day');
+    };
+
+    const columns = computed(() =>
+      props.columnsType.map((type) => {
+        switch (type) {
+          case 'year':
+            return genYearOptions();
+          case 'month':
+            return genMonthOptions();
+          case 'day':
+            return genDayOptions();
           default:
             throw new Error(
               `[Vant] DatePicker: unsupported columns type: ${type}`
             );
         }
-      });
-    });
-
-    const columns = computed(() =>
-      ranges.value.map(({ type, range }) => {
-        const options = times(
-          range[1] - range[0] + 1,
-          (index): PickerOption => {
-            const value = padZero(range[0] + index);
-            return props.formatter(type, {
-              text: value,
-              value,
-            });
-          }
-        );
-
-        if (props.filter) {
-          return props.filter(type, options);
-        }
-
-        return options;
       })
     );
 
-    // watch(currentDate, (value, oldValue) =>
+    // watch(currentValues, (value, oldValue) =>
     //   emit('update:modelValue', oldValue ? value : null)
     // );
 
@@ -167,8 +165,8 @@ export default defineComponent({
     //   (value) => {
     //     value = formatValue(value);
 
-    //     if (value && value.valueOf() !== currentDate.value?.valueOf()) {
+    //     if (value && value.valueOf() !== currentValues.value?.valueOf()) {
-    //       currentDate.value = value;
+    //       currentValues.value = value;
     //     }
     //   }
     // );
@@ -180,6 +178,7 @@ export default defineComponent({
     return () => (
       <Picker
         v-slots={slots}
+        v-model={currentValues.value}
         columns={columns.value}
         onChange={onChange}
         onCancel={onCancel}

packages/vant/src/date-picker/README.md

@@ -32,7 +32,7 @@ export default {
     const currentDate = ref(new Date(2021, 0, 1));
     return {
       minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
+      maxDate: new Date(2025, 5, 1),
       currentDate,
     };
   },
@@ -68,7 +68,7 @@ export default {
     const currentDate = ref(new Date(2021, 0, 1));
     return {
       minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
+      maxDate: new Date(2025, 5, 1),
       currentDate,
     };
   },
@@ -107,7 +107,7 @@ export default {
 
     return {
       minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
+      maxDate: new Date(2025, 5, 1),
       formatter,
       currentDate,
     };
@@ -144,7 +144,7 @@ export default {
     return {
       filter,
       minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
+      maxDate: new Date(2025, 5, 1),
       currentTime,
     };
   },

packages/vant/src/date-picker/README.zh-CN.md

@@ -34,7 +34,7 @@ export default {
     const currentDate = ref(new Date(2021, 0, 1));
     return {
       minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
+      maxDate: new Date(2025, 5, 1),
       currentDate,
     };
   },
@@ -70,7 +70,7 @@ export default {
     const currentDate = ref(new Date(2021, 0, 1));
     return {
       minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
+      maxDate: new Date(2025, 5, 1),
       currentDate,
     };
   },
@@ -111,7 +111,7 @@ export default {
 
     return {
       minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
+      maxDate: new Date(2025, 5, 1),
       formatter,
       currentDate,
     };
@@ -150,7 +150,7 @@ export default {
     return {
       filter,
       minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
+      maxDate: new Date(2025, 5, 1),
       currentTime,
     };
   },

packages/vant/src/date-picker/demo/index.vue

@@ -28,7 +28,7 @@ const t = useTranslate({
 });
 
 const minDate = new Date(2020, 0, 1);
-const maxDate = new Date(2025, 10, 1);
+const maxDate = new Date(2025, 5, 1);
 const basicDate = ref(new Date(2021, 0, 1));
 const yearMonthDate = ref(new Date(2021, 0, 1));
 const formatterDate = ref(new Date(2021, 0, 1));

packages/vant/src/time-picker/TimePicker.tsx

@@ -22,7 +22,7 @@ import {
 } from '../datetime-picker/utils';
 
 // Components
-import { Picker, PickerOption } from '../picker';
+import { Picker } from '../picker';
 
 const [name] = createNamespace('time-picker');
 
@@ -73,16 +73,13 @@ export default defineComponent({
 
     const columns = computed(() =>
       ranges.value.map(({ type, range }) => {
-        const options = times(
+        const options = times(range[1] - range[0] + 1, (index) => {
-          range[1] - range[0] + 1,
+          const value = padZero(range[0] + index);
-          (index): PickerOption => {
+          return props.formatter(type, {
-            const value = padZero(range[0] + index);
+            text: value,
-            return props.formatter(type, {
+            value,
-              text: value,
+          });
-              value,
+        });
-            });
-          }
-        );
 
         if (props.filter) {
           return props.filter(type, options);