fix: 修复 f-date-picker 选择日期失效问题

CHANGELOG.md

@@ -5,6 +5,7 @@
 - 更新 `f-menu` 组件 `on-menu-item-click` 和 `on-submenu-click` 方法参数接收顺序
 - 更新 `f-swap` 组件 `on-change` 方法参数接收顺序
 - 修复 `f-calendar` 组件部分回调失效问题
+- 修复 `f-date-picker` 选择日期失效问题
 
 ## 0.64.1 (2023-12-01)
 

packages/fighting-design/date-picker/src/date-picker.vue

@@ -4,7 +4,7 @@
   import { FInput } from '../../input'
   import { FTrigger } from '../../trigger'
   import { FCalendar } from '../../calendar'
-  import { addZero, warning, isFunction } from '../../_utils'
+  import { addZero, warning } from '../../_utils'
   import { FIconCalendar } from '../../_svg'
   import type { TriggerInstance } from '../../trigger'
 
@@ -22,72 +22,69 @@
   /** trigger 组件实例 */
   const triggerInstance = ref<TriggerInstance>()
 
-  let setDateFun: Function | undefined
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+
+  /** 日期映射对象 */
+  const formatDateMap = {
+    YYYY: year + '',
+    MM: prop.addZero ? addZero(month) : month + '',
+    DD: prop.addZero ? addZero(day) : day + ''
+  }
 
   /**
-   * 选取时间
-   *
-   * 通过点击日历上的时间进行选取
-   *
-   * @param { number } year 年份
-   * @param { number } month 月份
-   * @param { number } date 日期
+   * 设置时间
    */
-  const changeDate = (year: number, month: number, date: number): void => {
-    console.log(year, month, date)
+  const setDate = (): void => {
     /**
      * 格式化规则
      *
      * 字符串中必须包含 YYYY 或者 MM 或者 DD
      */
     const formatRule = RegExp(/([Y]{4})|([M]{2})|([D]{2})/)
+    /** 格式化规范 */
+    let format = prop.format
 
-    /** 如果存在格式化配置项 */
-    if (!formatRule.test(prop.format)) {
-      /** 在非标准格式下提示警告错误 */
-      /** format 不是一个标准格式，将使用默认格式 */
+    // 如果格式化的参数格式不正确
+    if (!formatRule.test(format)) {
+      // 在非标准格式下提示警告错误
+      // format 不是一个标准格式，将使用默认格式
       warning(
         'f-date-picker',
         '`format` is not a standard format, default format will be used'
       )
 
-      setDateFun = (): void => {
-        /** 将绑定值设置为格式化后的日期 */
-        // keyword.value = formatDate
-        dateModelValue.value = `${year}/${prop.addZero ? addZero(month) : month}/${
-          prop.addZero ? addZero(date) : date
-        }`
-      }
-      return
+      format = 'YYYY/MM/DD'
     }
 
-    /** 格式化映射对象 */
-    const checkDate = {
-      YYYY: year,
-      MM: prop.addZero ? addZero(month) : month,
-      DD: prop.addZero ? addZero(date) : date
-    }
-
-    /** 需要格式化的时间格式 */
-    let formatDate: string = prop.format
-
-    for (const key in checkDate) {
+    for (const key in formatDateMap) {
       /**
        * @see String.prototype.replace() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace
        * @see String.prototype.replace https://caniuse.com/?search=String.prototype.replace
        */
-      formatDate = formatDate.replace(
+      format = format.replace(
         key,
-        checkDate[key as keyof typeof checkDate].toString()
+        formatDateMap[key as keyof typeof formatDateMap].toString()
       )
     }
 
-    setDateFun = (): void => {
-      /** 将绑定值设置为格式化后的日期 */
-      dateModelValue.value = formatDate
-    }
+    dateModelValue.value = format
+  }
 
-    console.log(setDateFun)
+  /**
+   * 选取时间
+   *
+   * 通过点击日历上的时间进行选取
+   *
+   * @param { number } year 年份
+   * @param { number } month 月份
+   * @param { number } date 日期
+   */
+  const changeDate = (year: number, month: number, date: number): void => {
+    formatDateMap.YYYY = year + ''
+    formatDateMap.MM = prop.addZero ? addZero(month) : month + ''
+    formatDateMap.DD = prop.addZero ? addZero(date) : date + ''
   }
 
   /**
@@ -97,14 +94,12 @@
    * @param { boolean } target 是否为确认
    */
   const onConfirm = (evt: MouseEvent, target: boolean): void => {
+    /** 触发器实例 */
     const instance = triggerInstance.value as TriggerInstance
+    // 关闭触发器
     instance.close(evt)
-
-    console.log(setDateFun)
-
-    if (target && isFunction(setDateFun)) {
-      setDateFun()
-    }
+    // 为确认框的时候触发更新
+    target && setDate()
   }
 </script>