feat(comp:date-picker): timeFormat is now infered from format by defa…

…ult (#1045)

fix(comp:date-picker): time of Date value should be kept after range value selected

packages/components/date-picker/demo/Format.vue

@@ -5,6 +5,7 @@
     <IxDatePicker v-model:value="value" type="month" format="MM/yyyy"></IxDatePicker>
     <IxDatePicker v-model:value="value" type="quarter" format="'Q'Q/yyyy"></IxDatePicker>
     <IxDatePicker v-model:value="value" type="year" format="yy"></IxDatePicker>
+    <IxDatePicker v-model:value="value" type="datetime" format="dd/MM/yyyy hh:mm"></IxDatePicker>
   </IxSpace>
 </template>
 

packages/components/date-picker/src/composables/useFormat.ts

@@ -8,13 +8,20 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { DatePickerProps, DateRangePickerProps } from '../types'
-import type { ComputedRef } from 'vue'
 
-import { computed } from 'vue'
+import { type ComputedRef, computed } from 'vue'
 
-import { type DatePickerConfig, useGlobalConfig } from '@idux/components/config'
+import { type DatePickerConfig } from '@idux/components/config'
 
-export interface FormatContext {
+interface TimePanelEnabledStatus {
+  hourEnabled: ComputedRef<boolean>
+  hourUse12Hours: ComputedRef<boolean>
+  minuteEnabled: ComputedRef<boolean>
+  secondEnabled: ComputedRef<boolean>
+  use12Hours: ComputedRef<boolean>
+}
+
+export interface FormatContext extends Omit<TimePanelEnabledStatus, 'hourUse12Hours'> {
   formatRef: ComputedRef<string>
   dateFormatRef: ComputedRef<string>
   timeFormatRef: ComputedRef<string>
@@ -30,12 +37,16 @@ const defaultFormat = {
 } as const
 
 export function useFormat(props: DatePickerProps | DateRangePickerProps, config: DatePickerConfig): FormatContext {
-  const timePickerConfig = useGlobalConfig('timePicker')
   const formatRef = computed(() => {
     const type = props.type
     return props.format ?? config.format?.[type] ?? defaultFormat[type]
   })
 
+  const { hourEnabled, hourUse12Hours, minuteEnabled, secondEnabled, use12Hours } = useTimePanelEnabledStatus(
+    props,
+    formatRef,
+  )
+
   const dateFormatRef = computed(() => {
     if (props.type !== 'datetime') {
       return formatRef.value
@@ -45,12 +56,41 @@ export function useFormat(props: DatePickerProps | DateRangePickerProps, config:
   })
 
   const timeFormatRef = computed(() => {
-    return props.timeFormat ?? timePickerConfig.format
+    if (props.timeFormat) {
+      return props.timeFormat
+    }
+
+    const hourFormat = hourEnabled.value && (hourUse12Hours.value ? 'hh' : 'HH')
+    const timeFormatBase = [hourFormat, minuteEnabled.value && 'mm', secondEnabled.value && 'ss']
+      .filter(Boolean)
+      .join(':')
+
+    return use12Hours.value ? `${timeFormatBase} a` : timeFormatBase
   })
 
   return {
     formatRef,
     dateFormatRef,
     timeFormatRef,
+
+    hourEnabled,
+    minuteEnabled,
+    secondEnabled,
+    use12Hours,
+  }
+}
+
+function useTimePanelEnabledStatus(
+  props: DatePickerProps | DateRangePickerProps,
+  formatRef: ComputedRef<string>,
+): TimePanelEnabledStatus {
+  const _formatRef = computed(() => props.timeFormat ?? formatRef.value)
+
+  return {
+    hourEnabled: computed(() => /[hH]/.test(_formatRef.value)),
+    hourUse12Hours: computed(() => /h/.test(_formatRef.value)),
+    minuteEnabled: computed(() => /m/.test(_formatRef.value)),
+    secondEnabled: computed(() => /s/.test(_formatRef.value)),
+    use12Hours: computed(() => /[aA]/.test(_formatRef.value)),
   }
 }

packages/components/date-picker/src/composables/useRangePanelState.ts

@@ -12,7 +12,7 @@ import { type ComputedRef, computed, watch } from 'vue'
 
 import { callEmit, convertArray, useState } from '@idux/cdk/utils'
 
-import { sortRangeValue } from '../utils'
+import { applyDateTime, sortRangeValue } from '../utils'
 
 export interface RangePanelStateContext {
   panelValue: ComputedRef<(Date | undefined)[] | undefined>
@@ -49,8 +49,16 @@ export function useRangePanelState(props: DateRangePanelProps, dateConfig: DateC
       setIsSelecting(true)
       setSelectingDate([value, undefined])
     } else {
+      const propsValue = convertArray(props.value)
+
       setIsSelecting(false)
-      handleChange([selectingDate.value?.[0], value])
+      handleChange(
+        [selectingDate.value?.[0], value].map((dateValue, index) =>
+          propsValue[index]
+            ? applyDateTime(dateConfig, propsValue[index], dateValue!, ['hour', 'minute', 'second'])
+            : dateValue,
+        ),
+      )
     }
   }
 

packages/components/date-picker/src/composables/useTimePanelProps.ts

@@ -14,27 +14,48 @@ import { isArray } from 'lodash-es'
 
 export function useTimePanelProps(
   props: DatePickerProps,
-  timeFormatRef: ComputedRef<string>,
+  hourEnabled: ComputedRef<boolean>,
+  minuteEnabled: ComputedRef<boolean>,
+  secondEnabled: ComputedRef<boolean>,
+  use12Hours: ComputedRef<boolean>,
 ): ComputedRef<ɵTimePanelProps> {
-  return computed(() => getTimePanelProps(props.timePanelOptions ?? {}, timeFormatRef))
+  return computed(() => ({
+    ...getTimePanelProps(props.timePanelOptions ?? {}),
+    hourEnabled: hourEnabled.value,
+    minuteEnabled: minuteEnabled.value,
+    secondEnabled: secondEnabled.value,
+    use12Hours: use12Hours.value,
+  }))
 }
 
 export function useRangeTimePanelProps(
   props: DateRangePickerProps,
-  timeFormatRef: ComputedRef<string>,
+  hourEnabled: ComputedRef<boolean>,
+  minuteEnabled: ComputedRef<boolean>,
+  secondEnabled: ComputedRef<boolean>,
+  use12Hours: ComputedRef<boolean>,
 ): ComputedRef<ɵTimePanelProps[]> {
   const getOptions = (isFrom: boolean) =>
     (isArray(props.timePanelOptions) ? props.timePanelOptions[isFrom ? 0 : 1] : props.timePanelOptions) ?? {}
 
-  const rangeTimePanelProps = computed(() => [
-    getTimePanelProps(getOptions(true), timeFormatRef),
-    getTimePanelProps(getOptions(false), timeFormatRef),
-  ])
+  const rangeTimePanelProps = computed(() => {
+    const enabledStatus = {
+      hourEnabled: hourEnabled.value,
+      minuteEnabled: minuteEnabled.value,
+      secondEnabled: secondEnabled.value,
+      use12Hours: use12Hours.value,
+    }
+
+    return [
+      { ...getTimePanelProps(getOptions(true)), ...enabledStatus },
+      { ...getTimePanelProps(getOptions(false)), ...enabledStatus },
+    ]
+  })
 
   return rangeTimePanelProps
 }
 
-function getTimePanelProps(timePanelOptions: TimePanelOptions, timeFormatRef: ComputedRef<string>): ɵTimePanelProps {
+function getTimePanelProps(timePanelOptions: TimePanelOptions): ɵTimePanelProps {
   const { disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, hourStep, minuteStep, secondStep } =
     timePanelOptions
 
@@ -46,9 +67,5 @@ function getTimePanelProps(timePanelOptions: TimePanelOptions, timeFormatRef: Co
     hourStep,
     minuteStep,
     secondStep,
-    hourEnabled: /[hH]/.test(timeFormatRef.value),
-    minuteEnabled: /m/.test(timeFormatRef.value),
-    secondEnabled: /s/.test(timeFormatRef.value),
-    use12Hours: /[aA]/.test(timeFormatRef.value),
   }
 }

packages/components/date-picker/src/content/Content.tsx

@@ -23,6 +23,10 @@ export default defineComponent({
       mergedPrefixCls,
       dateFormatRef,
       timeFormatRef,
+      hourEnabled,
+      minuteEnabled,
+      secondEnabled,
+      use12Hours,
       slots,
       inputEnableStatus,
       inputRef,
@@ -79,7 +83,7 @@ export default defineComponent({
       }
     }
 
-    const _handleDateInputClear = (evt: Event) => {
+    const _handleDateInputClear = (evt: MouseEvent) => {
       if (!inputEnableStatus.value.enableOverlayTimeInput) {
         handleClear(evt)
       }
@@ -88,7 +92,7 @@ export default defineComponent({
     }
 
     const inputProps = useInputProps(context)
-    const timePanelProps = useTimePanelProps(props, timeFormatRef)
+    const timePanelProps = useTimePanelProps(props, hourEnabled, minuteEnabled, secondEnabled, use12Hours)
 
     const renderInputs = (prefixCls: string) => {
       if (!inputEnableStatus.value.enableOverlayDateInput) {

packages/components/date-picker/src/content/RangeContent.tsx

@@ -24,6 +24,10 @@ export default defineComponent({
       slots,
       dateFormatRef,
       timeFormatRef,
+      hourEnabled,
+      minuteEnabled,
+      secondEnabled,
+      use12Hours,
       rangeControlContext: { buffer, visiblePanel, fromControl, toControl, handlePanelChange },
       mergedPrefixCls,
       inputEnableStatus,
@@ -56,7 +60,7 @@ export default defineComponent({
     }
 
     const inputProps = useInputProps(context)
-    const timePanelProps = useRangeTimePanelProps(props, timeFormatRef)
+    const timePanelProps = useRangeTimePanelProps(props, hourEnabled, minuteEnabled, secondEnabled, use12Hours)
 
     const renderInputsSide = (prefixCls: string, isFrom: boolean) => {
       const { enableOverlayTimeInput } = inputEnableStatus.value