fix: datepicker

src/packages/datepicker/demo.vue

@@ -27,8 +27,8 @@
     <nut-datepicker
       v-model="currentDate"
       title="日期选择"
-      :minDate="minDate"
-      :maxDate="maxDate"
+      :min-date="minDate"
+      :max-date="maxDate"
       @confirm="
         val => {
           confirm(1, val);
@@ -41,8 +41,8 @@
       v-model="currentDate"
       title="日期时间选择"
       type="datetime"
-      :minDate="minDate"
-      :maxDate="maxDate"
+      :min-date="minDate"
+      :max-date="maxDate"
       @confirm="
         val => {
           confirm(2, val);
@@ -54,8 +54,8 @@
       v-model="currentDate"
       title="时间选择"
       type="time"
-      :minDate="minDate"
-      :maxDate="maxDate"
+      :min-date="minDate"
+      :max-date="maxDate"
       :is-use12-hours="true"
       @confirm="
         val => {
@@ -68,8 +68,8 @@
       v-model="currentDate"
       title="时间选择"
       type="time"
-      :minDate="minDate"
-      :maxDate="maxDate"
+      :min-date="minDate"
+      :max-date="maxDate"
       @confirm="
         val => {
           confirm(4, val);
@@ -81,9 +81,9 @@
       v-model="currentDate"
       title="时间选择"
       type="time"
-      :minDate="minDate"
+      :min-date="minDate"
       :minute-step="5"
-      :maxDate="maxDate"
+      :max-date="maxDate"
       @confirm="
         val => {
           confirm(5, val);
@@ -108,9 +108,9 @@ export default createDemo({
     const show5 = ref(false);
     const show6 = ref(false);
     const showList = [show, show2, show3, show4, show5, show6];
-    const currentDate = ref(new Date(2020, 0, 1));
+    const currentDate = new Date(2020, 0, 1);
 
-    const today = currentDate.value;
+    const today = currentDate;
     const desc1 = ref('2020-1-1');
     const desc2 = ref('2020-1-1');
     const desc3 = ref('2020年-1月-1日-0时-0分');
@@ -134,10 +134,10 @@ export default createDemo({
       currentDate,
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),
-      open: index => {
+      open: (index: number) => {
         showList[index].value = true;
       },
-      confirm: (index, val) => {
+      confirm: (index: number, val: string[]) => {
         console.log(val);
         descList[index].value = val.join('-');
       }

src/packages/datepicker/doc.md

@@ -1,4 +1,4 @@
-#  datepicker组件
+#  Datepicker组件
 
 ### 介绍
     
@@ -8,10 +8,10 @@
     
 ```javascript
 import { createApp } from 'vue';
-import { Picker } from '@nutui/nutui';
+import { DatePicker } from '@nutui/nutui';
 
 const app = createApp();
-app.use(Picker);
+app.use(DatePicker);
 ```
     
 ## 代码演示
@@ -50,8 +50,8 @@ export default createDemo({
 ```html
 <nut-datepicker
     v-model="currentDate"
-    :minDate="minDate"
-    :maxDate="maxDate"
+    :min-date="minDate"
+    :max-date="maxDate"
     @confirm="confirm"
     v-model:is-visible="show"
     :is-show-chinese="false"
@@ -84,8 +84,8 @@ export default createDemo({
 ```html
 <nut-datepicker
     v-model="currentDate"
-    :minDate="minDate"
-    :maxDate="maxDate"
+    :min-date="minDate"
+    :max-date="maxDate"
     type="datetime"
     @confirm="confirm"
     v-model:is-visible="show" 
@@ -119,8 +119,8 @@ export default createDemo({
 <nut-datepicker
     v-model="currentDate"
     type="time"
-    :minDate="minDate"
-    :maxDate="maxDate"
+    :min-date="minDate"
+    :max-date="maxDate"
     :is-use12-hours="true"
     @confirm="confirm"
     v-model:is-visible="show"
@@ -132,8 +132,8 @@ export default createDemo({
     v-model="currentDate"
     type="time"
     :minute-step="5"
-    :minDate="minDate"
-    :maxDate="maxDate"
+    :min-date="minDate"
+    :max-date="maxDate"
     :is-use12-hours="true"
     @confirm="confirm"
     v-model:is-visible="show"
@@ -146,13 +146,15 @@ export default createDemo({
     
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-|  type        |    类型，日期'date'， 日期时间'datetime'，时间'time'            | String |'date'               |isVisible     |     是否可见    |  Boolean    | boolean | false  |
-|     isUse12Hours     | 是否十二小时制度，只限类型为'time'时使用 | boolean | false              |
-| minuteStep | 分钟步进值  | number | 1 |
-|   isShowChinese        |       每列是否展示中文 | boolean | false           |
-|   title | 设置标题 | string | null |
-|   startDate | 开始日期 | Date | 十年前 |
-|   endDate | 结束日期 | Date | 十年后 |
+|  v-model        |    初始值 | Date |`null`  |
+|  type        |    类型，日期'date'， 日期时间'datetime'，时间'time' | String |`'date'`  |
+|  is-visible     |     是否可见    |  Boolean | `false`  |
+|  is-use12-hours     | 是否十二小时制度，只限类型为'time'时使用 | Boolean | `false` |
+|  minute-step | 分钟步进值  | Number | `1` |
+|  is-show-chinese  | 每列是否展示中文 | Boolean | `false`           |
+|  title | 设置标题 | String | `null` |
+|  min-date | 开始日期 | Date | `十年前` |
+|  max-date | 结束日期 | Date | `十年后` |
 
 
 

src/packages/datepicker/index.vue

@@ -11,7 +11,7 @@
   </view-block>
 </template>
 <script lang="ts">
-import { toRefs, watch, ref, computed } from 'vue';
+import { toRefs, watch, computed, reactive, onMounted } from 'vue';
 import picker from '@/packages/picker/index.vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('datepicker');
@@ -70,39 +70,28 @@ export default create({
       validator: isDate
     }
   },
-  components: {},
-  emits: ['click', 'close', 'update:isVisible', 'confirm'],
+  emits: ['click', 'update:isVisible', 'confirm'],
 
   setup(props, { emit }) {
-    const show = ref(false);
-    const title = ref(props.title);
-    const formatValue = value => {
+    const state = reactive({
+      show: false,
+      currentDate: new Date(),
+      title: props.title
+    });
+    const formatValue = (value: Date) => {
       if (!isDate(value)) {
         value = props.minDate;
       }
+      let timestmp = Math.max(value.getTime(), props.minDate.getTime());
+      timestmp = Math.min(timestmp, props.maxDate.getTime());
 
-      value = Math.max(value, (props.minDate as any).getTime());
-      value = Math.min(value, (props.maxDate as any).getTime());
-
-      return new Date(value);
+      return new Date(timestmp);
     };
-    const currentDate = ref(formatValue(props.modelValue));
-    watch(
-      () => props.title,
-      val => {
-        title.value = val;
-      }
-    );
-    watch(
-      () => props.isVisible,
-      val => {
-        show.value = val;
-      }
-    );
+
     function getMonthEndDay(year: number, month: number): number {
       return 32 - new Date(year, month - 1, 32).getDate();
     }
-    const getBoundary = (type, value) => {
+    const getBoundary = (type: string, value: Date) => {
       const boundary = props[`${type}Date`];
       const year = boundary.getFullYear();
       let month = 1;
@@ -148,7 +137,7 @@ export default create({
         maxHour,
         maxMinute,
         maxSeconds
-      } = getBoundary('max', currentDate.value);
+      } = getBoundary('max', state.currentDate);
 
       const {
         minYear,
@@ -157,7 +146,7 @@ export default create({
         minHour,
         minMinute,
         minSeconds
-      } = getBoundary('min', currentDate.value);
+      } = getBoundary('min', state.currentDate);
 
       let result = [
         {
@@ -210,19 +199,22 @@ export default create({
       return result;
     });
 
-    const changeHandler = val => {
+    const changeHandler = (val: string[]) => {
+      console.log(val);
       let formatDate = [];
       if (props.isShowChinese) {
-        formatDate = val.forEach((res: string) => {
-          Number(res.slice(0, res.length - 2));
-        });
+        formatDate = val.map((res: string) => {
+          return Number(res.slice(0, res.length - 1));
+        }) as any;
+        console.log(formatDate);
       } else {
         formatDate = val;
       }
-      currentDate.value = formatValue(
+      state.currentDate = formatValue(
         new Date(formatDate[0], formatDate[1] - 1, formatDate[2])
       );
     };
+
     const generateValue = (
       min: number,
       max: number,
@@ -232,7 +224,6 @@ export default create({
       if (!(max > min)) return;
       const arr: Array<number | string> = [];
       let index = 0;
-      // let stopAdd = false;
       while (min <= max) {
         if (props.isShowChinese) {
           arr.push(min + zhCNType[type]);
@@ -253,22 +244,24 @@ export default create({
 
       return { values: arr, defaultIndex: index };
     };
-    const getDateIndex = type => {
+
+    const getDateIndex = (type: string) => {
       if (type === 'year') {
-        return currentDate.value.getFullYear();
+        return state.currentDate.getFullYear();
       } else if (type === 'month') {
-        return currentDate.value.getMonth() + 1;
+        return state.currentDate.getMonth() + 1;
       } else if (type === 'day') {
-        return currentDate.value.getDate();
+        return state.currentDate.getDate();
       } else if (type === 'hour') {
-        return currentDate.value.getHours();
+        return state.currentDate.getHours();
       } else if (type === 'minute') {
-        return currentDate.value.getMinutes();
+        return state.currentDate.getMinutes();
       } else if (type === 'seconds') {
-        return currentDate.value.getSeconds();
+        return state.currentDate.getSeconds();
       }
       return 0;
     };
+
     const columns = computed(() => {
       const val = ranges.value.map(res => {
         return generateValue(
@@ -283,21 +276,43 @@ export default create({
       }
       return val;
     });
+
     const handleClick = (event: Event) => {
       emit('click', event);
     };
 
+    const closeHandler = () => {
+      emit('update:isVisible', false);
+    };
+
+    const confirm = (val: Event) => {
+      emit('update:isVisible', false);
+      emit('confirm', val);
+    };
+
+    onMounted(() => {
+      state.currentDate = formatValue(props.modelValue);
+    });
+
+    watch(
+      () => props.title,
+      val => {
+        state.title = val;
+      }
+    );
+
+    watch(
+      () => props.isVisible,
+      val => {
+        state.show = val;
+      }
+    );
+
     return {
-      show,
-      title,
+      ...toRefs(state),
       changeHandler,
-      closeHandler: () => {
-        emit('update:isVisible', false);
-      },
-      confirm: val => {
-        emit('update:isVisible', false);
-        emit('confirm', val);
-      },
+      closeHandler,
+      confirm,
       columns
     };
   }

src/packages/picker/doc.md

@@ -173,4 +173,5 @@ export default createDemo({
 |--------|----------------|--------------|
 | close  | 关闭弹窗时触发  | event: Event |
 | confirm  | 点击确认时候触发  | event: Event |
+| change  | 改变时触发  | val |