hy-app 0.3.0 → 0.3.2

package/components/hy-datetime-picker/hy-datetime-picker.vue

@@ -1,6 +1,10 @@
 <template>
   <view :class="['hy-datetime-picker', customClass]" :style="customStyle">
-    <view v-if="hasInput" class="hy-datetime-picker__has-input" @click="onShowByClickInput">
+    <view
+      v-if="hasInput"
+      class="hy-datetime-picker__has-input"
+      @click="onShowByClickInput"
+    >
       <slot name="trigger" :value="inputValue">
         <HyInput
           v-model="inputValue"
@@ -17,7 +21,9 @@
           :placeholder="input?.placeholder || '请选择时间'"
           :placeholderStyle="input?.placeholderStyle"
           :placeholderClass="input?.placeholderClass"
-          :customStyle="Object.assign({ 'pointer-events': 'none' }, input?.customStyle)"
+          :customStyle="
+            Object.assign({ 'pointer-events': 'none' }, input?.customStyle)
+          "
         ></HyInput>
         <view class="input-cover"></view>
       </slot>
@@ -57,32 +63,32 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-datetime-picker',
+  name: "hy-datetime-picker",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import dayjs from 'dayjs/esm'
-import { error, padZero } from '../../utils'
-import { DateModeEnum } from '../../typing'
-import type HyInputProps from '../hy-input/typing'
+import { computed, onMounted, ref, toRefs, watch } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import dayjs from "dayjs/esm";
+import { error, padZero } from "../../utils";
+import { DateModeEnum } from "../../typing";
+import type HyInputProps from "../hy-input/typing";
+import type { IDatetimePickerEmits } from "./typing";
 // 组件
-import HyInput from '../hy-input/hy-input.vue'
-import HyPicker from '../hy-picker/hy-picker.vue'
-import { IDatetimePickerEmits } from '@/package/components/hy-datetime-picker/typing'
+import HyInput from "../hy-input/hy-input.vue";
+import HyPicker from "../hy-picker/hy-picker.vue";
 
 /**
  * 此选择器用于时间日期选择
  * @displayName hy-datetime-picker
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -97,7 +103,7 @@ const props = defineProps({
    * */
   popupMode: {
     type: String,
-    default: 'bottom',
+    default: "bottom",
   },
   /** 是否显示顶部的操作栏 */
   showToolbar: {
@@ -105,7 +111,10 @@ const props = defineProps({
     default: true,
   },
   /** 绑定值 */
-  modelValue: [String, Number, Date],
+  modelValue: {
+    type: [String, Number, Date],
+    default: "",
+  },
   /** 顶部标题 */
   title: String,
   /**
@@ -113,7 +122,7 @@ const props = defineProps({
    * @values date,time,year-month,datetime
    * */
   mode: {
-    type: String,
+    type: String as PropType<DateModeEnum>,
     default: DateModeEnum.DATETIME,
   },
   /** 可选的最大时间  默认值为后10年 */
@@ -163,22 +172,22 @@ const props = defineProps({
   /** 取消按钮的文字 */
   cancelText: {
     type: String,
-    default: '取消',
+    default: "取消",
   },
   /** 确认按钮的文字 */
   confirmText: {
     type: String,
-    default: '确认',
+    default: "确认",
   },
   /** 取消按钮的颜色 */
   cancelColor: {
     type: String,
-    default: '#909193',
+    default: "#909193",
   },
   /** 确认按钮的颜色 */
   confirmColor: {
     type: String,
-    default: '#3c9cff',
+    default: "#3c9cff",
   },
   /** 每列中可见选项的数量 */
   visibleItemCount: {
@@ -194,7 +203,7 @@ const props = defineProps({
   defaultIndex: {
     type: Array,
     default() {
-      return []
+      return [];
     },
   },
   /** 输入框是否显示边框 */
@@ -219,309 +228,302 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const {
-  show,
-  modelValue,
-  hasInput,
-  input,
-  formatter,
-  filter,
-  format,
-  mode,
-  closeOnClickOverlay,
-  maxDate,
-  minDate,
-  minHour,
-  maxHour,
-  minMinute,
-  maxMinute,
-} = toRefs(props)
-const emit = defineEmits<IDatetimePickerEmits>()
+});
+const emit = defineEmits<IDatetimePickerEmits>();
 
 // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
-const inputValue = ref<string | number>('') // 表单显示值
-const innerValue = ref<string | number>('') // 表单显示值
-const showByClickInput = ref<boolean>(false) // 是否在hasInput模式下显示日期选择弹唱
-const columns = ref<any[]>([])
-const innerDefaultIndex = ref<number[]>([])
-let innerFormatter = (type: any, value: any) => value
+const inputValue = ref<string | number>(""); // 表单显示值
+const innerValue = ref<string | number>(""); // 表单显示值
+const showByClickInput = ref<boolean>(false); // 是否在hasInput模式下显示日期选择弹唱
+const columns = ref<any[]>([]);
+const innerDefaultIndex = ref<number[]>([]);
+let innerFormatter = (type: any, value: any) => value;
 const validModes = new Set([
   DateModeEnum.TIME,
   DateModeEnum.MONTH_DAY,
   DateModeEnum.HOUR_MINUTE,
   DateModeEnum.MINUTE_SECOND,
-])
+]);
 
 /**
  * @description 更新各列的值
  * */
 const updateColumns = () => {
-  const formatterFn = formatter.value || innerFormatter
+  const formatterFn = props.formatter || innerFormatter;
   // 获取各列的值，并且map后，对各列的具体值进行补0操作
   columns.value = getOriginColumns().map((column) =>
     column.values.map((value) => formatterFn(column.type, value)),
-  )
-}
+  );
+};
 
 /**
  * @description 更新各列的值，进行补0、格式化等操作
  * */
 const updateColumnValue = (value: string | number) => {
-  innerValue.value = value
-  updateColumns()
+  innerValue.value = value;
+  updateColumns();
   // 延迟执行,等待u-picker组件列数据更新完后再设置选中值索引
   setTimeout(() => {
-    updateIndexes(value)
-  }, 100)
-}
+    updateIndexes(value);
+  }, 100);
+};
 
 const init = () => {
   // 获取当前值
-  innerValue.value = correctValue(modelValue.value)
+  innerValue.value = correctValue(props.modelValue);
   // 更新列表
-  updateColumnValue(innerValue.value)
+  updateColumnValue(innerValue.value);
 
   // 初始化hasInput展示
-  getInputValue(innerValue.value)
-}
+  getInputValue(innerValue.value);
+};
 
 watch(
-  () => show.value,
+  () => props.show,
   (newValue) => {
     if (newValue) {
-      updateColumnValue(innerValue.value)
+      updateColumnValue(innerValue.value);
     }
   },
-)
+);
 
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   () => init(),
-)
+);
 
 const propsChange = computed(() => {
   return [
-    mode.value,
-    maxDate.value,
-    minDate.value,
-    minHour.value,
-    maxHour.value,
-    minMinute.value,
-    maxMinute.value,
-    filter.value,
-  ]
-})
+    props.mode,
+    props.maxDate,
+    props.minDate,
+    props.minHour,
+    props.maxHour,
+    props.minMinute,
+    props.maxMinute,
+    props.filter,
+  ];
+});
 
 watch(
   () => propsChange.value,
   () => init(),
-)
+);
 
 onMounted(() => {
-  init()
-})
+  init();
+});
 
 const getInputValue = (newValue: string | number) => {
-  if (newValue == '' || !newValue) {
-    inputValue.value = ''
-    return
+  if (newValue == "" || !newValue) {
+    inputValue.value = "";
+    return;
   }
-  if (mode.value === 'time') {
-    inputValue.value = newValue
+  if (props.mode === "time") {
+    inputValue.value = newValue;
   } else {
-    if (format.value) {
-      inputValue.value = dayjs(newValue).format(format.value)
+    if (props.format) {
+      inputValue.value = dayjs(newValue).format(props.format);
     } else {
-      let format = ''
-      switch (mode.value) {
+      let format = "";
+      switch (props.mode) {
         case DateModeEnum.DATE:
-          format = 'YYYY-MM-DD'
-          break
+          format = "YYYY-MM-DD";
+          break;
         case DateModeEnum.YEAR_MONTH:
-          format = 'YYYY-MM'
-          break
+          format = "YYYY-MM";
+          break;
         case DateModeEnum.DATETIME:
-          format = 'YYYY-MM-DD HH:mm:ss'
-          break
+          format = "YYYY-MM-DD HH:mm:ss";
+          break;
         case DateModeEnum.MONTH_DAY:
-          format = 'MM-DD'
-          break
+          format = "MM-DD";
+          break;
         case DateModeEnum.HOUR_MINUTE:
-          format = 'HH:mm'
-          break
+          format = "HH:mm";
+          break;
         case DateModeEnum.MINUTE_SECOND:
-          format = 'mm:ss'
-          break
+          format = "mm:ss";
+          break;
         default:
-          break
+          break;
       }
-      inputValue.value = dayjs(newValue).isValid() ? dayjs(newValue).format(format) : newValue
+      inputValue.value = dayjs(newValue).isValid()
+        ? dayjs(newValue).format(format)
+        : newValue;
     }
   }
-}
+};
 const times = (n: number, iteratee: Function) => {
-  let index = -1
-  const result = Array(n < 0 ? 0 : n)
+  let index = -1;
+  const result = Array(n < 0 ? 0 : n);
   while (++index < n) {
-    result[index] = iteratee(index)
+    result[index] = iteratee(index);
   }
-  return result
-}
+  return result;
+};
 
 /**
  * @description 关闭选择器
  * */
 const close = () => {
-  if (closeOnClickOverlay.value) {
-    if (hasInput.value) {
-      showByClickInput.value = false
+  if (props.closeOnClickOverlay) {
+    if (props.hasInput) {
+      showByClickInput.value = false;
     }
-    emit('close')
+    emit("close");
   }
-}
+};
 
 /**
  * @description 点击工具栏的取消按钮
  * */
 const cancel = () => {
-  if (hasInput.value) {
-    showByClickInput.value = false
+  if (props.hasInput) {
+    showByClickInput.value = false;
   }
-  emit('cancel')
-}
+  emit("cancel");
+};
 
 /**
  * @description 点击工具栏的确定按钮
  * */
 const confirm = () => {
-  emit('update:modelValue', innerValue.value)
-  if (hasInput.value) {
-    getInputValue(innerValue.value)
-    showByClickInput.value = false
+  emit("update:modelValue", innerValue.value);
+  if (props.hasInput) {
+    getInputValue(innerValue.value);
+    showByClickInput.value = false;
   }
-  emit('confirm', {
+  emit("confirm", {
     value: innerValue.value,
-    mode: mode.value,
-  })
-}
+    mode: props.mode,
+  });
+};
 
 /**
  * @description 用正则截取输出值,当出现多组数字时,抛出错误
  * */
 const intercept = (e: any, type?: string) => {
-  let judge = e.match(/\d+/g)
+  let judge = e.match(/\d+/g);
   //判断是否掺杂数字
   if (judge.length > 1) {
-    error('请勿在过滤或格式化函数时添加数字')
-    return 0
+    error("请勿在过滤或格式化函数时添加数字");
+    return 0;
   } else if (type && judge[0].length == 4) {
     //判断是否是年份
-    return judge[0]
+    return judge[0];
   } else if (judge[0].length > 2) {
-    error('请勿在过滤或格式化函数时添加数字')
-    return 0
+    error("请勿在过滤或格式化函数时添加数字");
+    return 0;
   } else {
-    return judge[0]
+    return judge[0];
   }
-}
+};
 
 /**
  * @description 列发生变化时触发
  * */
 const change = (e: any) => {
-  const { indexs, values } = e
-  let selectValue: string | number = ''
-  if (validModes.has(mode.value) && mode.value !== DateModeEnum.MONTH_DAY) {
+  const { indexs, values } = e;
+  let selectValue: string | number = "";
+  if (validModes.has(props.mode) && props.mode !== DateModeEnum.MONTH_DAY) {
     // 根据value各列索引，从各列数组中，取出当前时间的选中值
-    selectValue = `${intercept(values[0][indexs[0]])}:${intercept(values[1][indexs[1]])}`
-  } else if (mode.value === DateModeEnum.MONTH_DAY) {
+    selectValue = `${intercept(values[0][indexs[0]])}:${intercept(values[1][indexs[1]])}`;
+  } else if (props.mode === DateModeEnum.MONTH_DAY) {
     // 根据value各列索引，从各列数组中，取出当前时间的选中值
-    selectValue = `${intercept(values[0][indexs[0]])}-${intercept(values[1][indexs[1]])}`
+    selectValue = `${intercept(values[0][indexs[0]])}-${intercept(values[1][indexs[1]])}`;
   } else {
     // 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
-    const year = parseInt(intercept(values[0][indexs[0]], 'year'))
-    const month = parseInt(intercept(values[1][indexs[1]]))
-    let date = parseInt(values[2] ? intercept(values[2][indexs[2]]) : 1)
+    const year = parseInt(intercept(values[0][indexs[0]], "year"));
+    const month = parseInt(intercept(values[1][indexs[1]]));
+    let date = parseInt(values[2] ? intercept(values[2][indexs[2]]) : 1);
     let hour = 0,
       minute = 0,
-      second = 0
+      second = 0;
     // 此月份的最大天数
-    const maxDate = dayjs(`${year}-${month}`).daysInMonth()
+    const maxDate = dayjs(`${year}-${month}`).daysInMonth();
     // 不允许超过maxDate值
-    date = Math.min(maxDate, date)
-    if (mode.value === DateModeEnum.DATETIME) {
-      hour = parseInt(intercept(values[3][indexs[3]]))
-      minute = parseInt(intercept(values[4][indexs[4]]))
-      second = parseInt(intercept(values[5][indexs[5]]))
+    date = Math.min(maxDate, date);
+    if (props.mode === DateModeEnum.DATETIME) {
+      hour = parseInt(intercept(values[3][indexs[3]]));
+      minute = parseInt(intercept(values[4][indexs[4]]));
+      second = parseInt(intercept(values[5][indexs[5]]));
     }
     // 转为时间模式
-    selectValue = Number(new Date(year, month - 1, date, hour, minute, second))
+    selectValue = Number(new Date(year, month - 1, date, hour, minute, second));
   }
   // 取出准确的合法值，防止超越边界的情况
-  selectValue = correctValue(selectValue)
-  innerValue.value = selectValue
-  updateColumnValue(selectValue)
+  selectValue = correctValue(selectValue);
+  innerValue.value = selectValue;
+  updateColumnValue(selectValue);
   // 发出change时间，value为当前选中的时间戳
-  emit('change', {
+  emit("change", {
     value: selectValue,
-    // #ifndef MP-WEIXIN
-    // 微信小程序不能传递this实例，会因为循环引用而报错
-    // picker: this.$refs.picker,
-    // #endif
-    mode: mode.value,
-  })
-}
+    mode: props.mode,
+  });
+};
 
 /**
  * @description 更新索引
  * */
 const updateIndexes = (value: number | string) => {
-  let values: string[] = []
-  let timeArr: string[] = []
-  const formatterFn = formatter.value || innerFormatter
+  let values: string[] = [];
+  let timeArr: string[] = [];
+  const formatterFn = props.formatter || innerFormatter;
 
-  switch (mode.value) {
+  switch (props.mode) {
     case DateModeEnum.TIME:
-      timeArr = value.toString().split(':')
+      timeArr = value.toString().split(":");
       // 使用formatter格式化方法进行管道处理
-      values = [formatterFn('hour', timeArr[0]), formatterFn('minute', timeArr[1])]
-      break
+      values = [
+        formatterFn("hour", timeArr[0]),
+        formatterFn("minute", timeArr[1]),
+      ];
+      break;
     case DateModeEnum.MONTH_DAY:
-      timeArr = value.toString().split('-')
+      timeArr = value.toString().split("-");
       // 使用formatter格式化方法进行管道处理
-      values = [formatterFn('month', timeArr[0]), formatterFn('day', timeArr[1])]
-      break
+      values = [
+        formatterFn("month", timeArr[0]),
+        formatterFn("day", timeArr[1]),
+      ];
+      break;
     case DateModeEnum.HOUR_MINUTE:
-      timeArr = value.toString().split(':')
+      timeArr = value.toString().split(":");
       // 使用formatter格式化方法进行管道处理
-      values = [formatterFn('hour', timeArr[0]), formatterFn('minute', timeArr[1])]
-      break
+      values = [
+        formatterFn("hour", timeArr[0]),
+        formatterFn("minute", timeArr[1]),
+      ];
+      break;
     case DateModeEnum.MINUTE_SECOND:
-      timeArr = value.toString().split(':')
+      timeArr = value.toString().split(":");
       // 使用formatter格式化方法进行管道处理
-      values = [formatterFn('minute', timeArr[0]), formatterFn('second', timeArr[1])]
-      break
+      values = [
+        formatterFn("minute", timeArr[0]),
+        formatterFn("second", timeArr[1]),
+      ];
+      break;
     default:
       values = [
-        formatterFn('year', `${dayjs(value).year()}`),
+        formatterFn("year", `${dayjs(value).year()}`),
         // 月份补0
-        formatterFn('month', padZero(dayjs(value).month() + 1)),
-      ]
-      if (mode.value === DateModeEnum.DATE) {
+        formatterFn("month", padZero(dayjs(value).month() + 1)),
+      ];
+      if (props.mode === DateModeEnum.DATE) {
         // date模式，需要添加天列
-        values.push(formatterFn('day', padZero(dayjs(value).date())))
+        values.push(formatterFn("day", padZero(dayjs(value).date())));
       }
-      if (mode.value === DateModeEnum.DATETIME) {
+      if (props.mode === DateModeEnum.DATETIME) {
         // 数组的push方法，可以写入多个参数
         values.push(
-          formatterFn('day', padZero(dayjs(value).date())),
-          formatterFn('hour', padZero(dayjs(value).hour())),
-          formatterFn('minute', padZero(dayjs(value).minute())),
-          formatterFn('second', padZero(dayjs(value).second())),
-        )
+          formatterFn("day", padZero(dayjs(value).date())),
+          formatterFn("hour", padZero(dayjs(value).hour())),
+          formatterFn("minute", padZero(dayjs(value).minute())),
+          formatterFn("second", padZero(dayjs(value).second())),
+        );
       }
-      break
+      break;
   }
   // 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
   innerDefaultIndex.value = columns.value.map((column, index) => {
@@ -529,9 +531,9 @@ const updateIndexes = (value: number | string) => {
     return Math.max(
       0,
       column.findIndex((item: string) => item === values[index]),
-    )
-  })
-}
+    );
+  });
+};
 
 /**
  * @description 获取每列数据
@@ -540,121 +542,127 @@ const getOriginColumns = () => {
   // 生成各列的值
   return getRanges().map(({ type, range }) => {
     let values = times(range[1] - range[0] + 1, (index: number) => {
-      let value: string | number = range[0] + index
-      value = type === 'year' ? `${value}` : padZero(value)
-      return value
-    })
+      let value: string | number = range[0] + index;
+      value = type === "year" ? `${value}` : padZero(value);
+      return value;
+    });
     // 进行过滤
-    if (filter.value) {
-      values = filter.value(type, values)
+    if (props.filter) {
+      values = props.filter(type, values);
       if (!values || (values && values.length == 0)) {
-        error('日期filter结果不能为空')
+        error("日期filter结果不能为空");
       }
     }
-    return { type, values }
-  })
-}
+    return { type, values };
+  });
+};
 
 /**
  * @description 得出合法的时间
  * */
 const correctValue = (value: number | string | Date): string | number => {
-  const isDateMode = mode.value !== DateModeEnum.TIME
+  const isDateMode = props.mode !== DateModeEnum.TIME;
   // if (isDateMode && !test.date(value)) {
   if (!isDateMode && !value) {
     // 如果是时间类型，而又没有默认值的话，就用最小时间
-    value = `${padZero(minHour.value)}:${padZero(minMinute.value)}`
+    value = `${padZero(props.minHour)}:${padZero(props.minMinute)}`;
   }
   // 时间类型
-  if (validModes.has(mode.value)) {
-    return value as string
+  if (validModes.has(props.mode)) {
+    return value as string;
   } else {
     // 如果是日期格式，控制在最小日期和最大日期之间
-    value = dayjs(value).isBefore(dayjs(minDate.value)) ? minDate.value : value
-    value = dayjs(value).isAfter(dayjs(maxDate.value)) ? maxDate.value : value
-    return value as string | number
+    value = dayjs(value).isBefore(dayjs(props.minDate)) ? props.minDate : value;
+    value = dayjs(value).isAfter(dayjs(props.maxDate)) ? props.maxDate : value;
+    return value as string | number;
   }
-}
+};
 /**
  * @description 获取每列的最大和最小值
  * */
 const getRanges = () => {
-  if (mode.value === DateModeEnum.TIME) {
+  if (props.mode === DateModeEnum.TIME) {
     return [
       {
-        type: 'hour',
+        type: "hour",
         range: [props.minHour, props.maxHour],
       },
       {
-        type: 'minute',
+        type: "minute",
         range: [props.minMinute, props.maxMinute],
       },
-    ]
+    ];
   }
-  const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary('max', innerValue.value)
-  const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary('min', innerValue.value)
+  const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary(
+    "max",
+    innerValue.value,
+  );
+  const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary(
+    "min",
+    innerValue.value,
+  );
   const result = [
     {
-      type: 'year',
+      type: "year",
       range: [minYear, maxYear],
     },
     {
-      type: 'month',
+      type: "month",
       range: [minMonth, maxMonth],
     },
     {
-      type: 'day',
+      type: "day",
       range: [minDate, maxDate],
     },
     {
-      type: 'hour',
+      type: "hour",
       range: [minHour, maxHour],
     },
     {
-      type: 'minute',
+      type: "minute",
       range: [minMinute, maxMinute],
     },
     {
-      type: 'second',
+      type: "second",
       range: [minMinute, maxMinute],
     },
-  ]
-  let arr = result
+  ];
+  let arr = result;
   // 截取对应的列数
-  if (mode.value === DateModeEnum.DATE) arr = result.splice(0, 3)
-  if (mode.value === DateModeEnum.YEAR_MONTH) arr = result.splice(0, 2)
-  if (mode.value === DateModeEnum.MONTH_DAY) arr = result.splice(1, 2)
-  if (mode.value === DateModeEnum.HOUR_MINUTE) arr = result.splice(3, 2)
-  if (mode.value === DateModeEnum.MINUTE_SECOND) arr = result.splice(4, 2)
-  return arr
-}
+  if (props.mode === DateModeEnum.DATE) arr = result.splice(0, 3);
+  if (props.mode === DateModeEnum.YEAR_MONTH) arr = result.splice(0, 2);
+  if (props.mode === DateModeEnum.MONTH_DAY) arr = result.splice(1, 2);
+  if (props.mode === DateModeEnum.HOUR_MINUTE) arr = result.splice(3, 2);
+  if (props.mode === DateModeEnum.MINUTE_SECOND) arr = result.splice(4, 2);
+  return arr;
+};
 /**
  * @description 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
  * */
 const getBoundary = (type: string, innerVal: string | number) => {
-  const value = new Date(innerVal)
-  const boundary = new Date((props as any)[`${type}Date`])
-  const year = dayjs(boundary).year()
-  let month = 1
-  let date = 1
-  let hour = 0
-  let minute = 0
-  if (type === 'max') {
-    month = 12
+  const value = new Date(innerVal);
+  const boundary = new Date((props as any)[`${type}Date`]);
+  const year = dayjs(boundary).year();
+  let month = 1;
+  let date = 1;
+  let hour = 0;
+  let minute = 0;
+  if (type === "max") {
+    month = 12;
     // 月份的天数
-    date = dayjs(value).daysInMonth() || 31
-    hour = 23
-    minute = 59
+    date = dayjs(value).daysInMonth() || 31;
+    hour = 23;
+    minute = 59;
   }
   // 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
   if (dayjs(value).year() === year) {
-    month = dayjs(boundary).month() + 1
+    month = dayjs(boundary).month() + 1;
     if (dayjs(value).month() + 1 === month) {
-      date = dayjs(boundary).date()
+      date = dayjs(boundary).date();
       if (dayjs(value).date() === date) {
-        hour = dayjs(boundary).hour()
+        hour = dayjs(boundary).hour();
         if (dayjs(value).hour() === hour) {
-          minute = dayjs(boundary).minute()
+          minute = dayjs(boundary).minute();
         }
       }
     }
@@ -665,15 +673,15 @@ const getBoundary = (type: string, innerVal: string | number) => {
     [`${type}Date`]: date,
     [`${type}Hour`]: hour,
     [`${type}Minute`]: minute,
-  }
-}
+  };
+};
 const onShowByClickInput = () => {
-  if (!input.value?.disabled) {
-    showByClickInput.value = !showByClickInput.value
+  if (!props.input?.disabled) {
+    showByClickInput.value = !showByClickInput.value;
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>