fix(comp:time-picker): resolve time-range-picker console error

packages/components/_private/time-panel/__tests__/timePanel.spec.ts

@@ -44,6 +44,11 @@ describe('TimePanel', () => {
       },
     })
 
+    expect(findCell(wrapper, 0, 12)?.props().selected).toBe(true)
+    expect(findCell(wrapper, 1, 0)?.props().selected).toBe(true)
+    expect(findCell(wrapper, 2, 0)?.props().selected).toBe(true)
+    expect(findCell(wrapper, 3, 'am')?.props().selected).toBe(true)
+
     await findCell(wrapper, 0, 4)?.trigger('click')
     expect(onChange).toBeCalledWith(new Date(2021, 12, 8, 4, 0, 0, 0))
 
@@ -159,11 +164,26 @@ describe('TimePanel', () => {
   })
 
   test('disabledHours work', async () => {
+    const onChange = vi.fn()
     const wrapper = TimePanelMount({
-      props: { value: newDate(), hourEnabled: true, disabledHours: () => [1, 2, 3, 4, 5] },
+      props: { value: newDate(), hourEnabled: true, disabledHours: () => [1, 2, 3, 4, 5], onChange },
     })
-    expect(findCell(wrapper, 0, 1)?.props().disabled).toBe(true)
-    expect(findCell(wrapper, 0, 6)?.props().disabled).toBe(false)
+
+    const disabledCell1 = findCell(wrapper, 0, 1)
+    const disabledCell5 = findCell(wrapper, 0, 5)
+    const enabledCell = findCell(wrapper, 0, 6)
+    expect(!!disabledCell1?.props().disabled).toBe(true)
+    expect(!!disabledCell5?.props().disabled).toBe(true)
+    expect(!!enabledCell?.props().disabled).toBe(false)
+
+    await disabledCell1?.trigger('click')
+    expect(onChange).not.toBeCalled()
+
+    await disabledCell5?.trigger('click')
+    expect(onChange).not.toBeCalled()
+
+    await enabledCell?.trigger('click')
+    expect(onChange).toBeCalled()
 
     expect(wrapper.html()).toMatchSnapshot()
   })

packages/components/_private/time-panel/__tests__/timePanelCell.spec.ts

@@ -43,7 +43,7 @@ describe('TimePanelCell', () => {
     const wrapper = TimePanelCellMount({ props: { value: 'cell', disabled: true, selected: false, onActive } })
     wrapper.trigger('click')
 
-    expect(wrapper.element.classList.contains('ix-time-panel-cell')).toBeTruthy()
+    expect(wrapper.element.classList.contains('ix-time-panel-cell-disabled')).toBeTruthy()
     expect(onActive).not.toBeCalled()
   })
 
@@ -52,7 +52,7 @@ describe('TimePanelCell', () => {
     const wrapper = TimePanelCellMount({ props: { value: 'cell', disabled: false, selected: true, onActive } })
     wrapper.trigger('click')
 
-    expect(wrapper.element.classList.contains('ix-time-panel-cell')).toBeTruthy()
+    expect(wrapper.element.classList.contains('ix-time-panel-cell-selected')).toBeTruthy()
     expect(onActive).not.toBeCalled()
   })
 })

packages/components/_private/time-panel/src/types.ts

@@ -87,14 +87,14 @@ export type TimePanelInstance = InstanceType<DefineComponent<TimePanelProps>>
 
 // private
 export interface TimePanelCell {
-  value: number | 'am' | 'pm'
+  value: number | AmPm
   disabled: boolean
 }
 
 export const timePanelColumnProps = {
-  selectedValue: [String, Number] as PropType<string | number>,
+  selectedValue: [String, Number] as PropType<number | AmPm>,
   activeValue: {
-    type: [String, Number] as PropType<string | number>,
+    type: [String, Number] as PropType<number | AmPm>,
     required: true,
   },
   options: {
@@ -120,7 +120,7 @@ export const timePanelCellProps = {
     default: false,
   },
   value: {
-    type: [String, Number] as PropType<string | number>,
+    type: [String, Number] as PropType<number | AmPm>,
     required: true,
   },
 

packages/components/_private/time-panel/src/utils.ts

@@ -5,10 +5,10 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { TimePanelColumnType } from './types'
+import type { AmPm, TimePanelColumnType } from './types'
 import type { DateConfig } from '@idux/components/config'
 
-export function normalizeAmPm(hour: number, is12Hours = false): 'am' | 'pm' | undefined {
+export function normalizeAmPm(hour: number, is12Hours = false): AmPm | undefined {
   if (!is12Hours) {
     return
   }
@@ -26,9 +26,9 @@ export function calculateViewHour(hour: number, is12Hours: boolean): number {
   return hour
 }
 
-export function getHourValue(hour: number, ampm?: 'am' | 'pm' | ''): number {
+export function getHourValue(hour: number, ampm?: AmPm | ''): number {
   if (ampm) {
-    ampm = ampm.toLowerCase() as 'am' | 'pm' | ''
+    ampm = ampm.toLowerCase() as AmPm | ''
     if (ampm === 'am') {
       hour >= 12 && (hour -= 12)
     }
@@ -45,7 +45,7 @@ export function calculateValue(
   dateNow: Date,
   type: TimePanelColumnType,
   is12Hours: boolean,
-  value: number | 'am' | 'pm' | '',
+  value: number | AmPm | '',
 ): Date {
   const { get, set } = dateConfig
   const selectNumber = Number(value)
@@ -59,6 +59,6 @@ export function calculateValue(
     case 'second':
       return set(newDate, selectNumber, 'second')
     case 'AM/PM':
-      return set(newDate, getHourValue(get(newDate, 'hour'), value.toString() as 'am' | 'pm' | ''), 'hour')
+      return set(newDate, getHourValue(get(newDate, 'hour'), value.toString() as AmPm | ''), 'hour')
   }
 }

packages/components/date-picker/__tests__/datePicker.spec.ts

@@ -93,6 +93,8 @@ describe('DatePicker', () => {
     await wrapper.find('.ix-date-picker').trigger('click')
     expect(onUpdateOpen).not.toBeCalled()
 
+    const inputEl = wrapper.find('.ix-date-picker').find('input')
+    expect(inputEl.attributes().disabled).not.toBeUndefined()
     await wrapper.find('.ix-date-picker').find('input').setValue('2021-03-01')
     expect(onInput).not.toBeCalled()
   })
@@ -121,6 +123,10 @@ describe('DatePicker', () => {
     const wrapper = DatePickerMount({ props: { value: new Date('2021-10-01'), format: 'dd/MM/yyyy' } })
 
     expect(wrapper.find('.ix-date-picker').find('input').element.value).toBe('01/10/2021')
+
+    await wrapper.setProps({ format: 'dd-MM-yyyy' })
+
+    expect(wrapper.find('.ix-date-picker').find('input').element.value).toBe('01-10-2021')
   })
 
   test('input work', async () => {

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

@@ -104,7 +104,7 @@ export function useControl(
     setPanelValue(currDateValue)
   }
 
-  watch(valueRef, () => init(), { immediate: true })
+  watch([valueRef, formatRef], () => init(), { immediate: true })
   watch(inputEnableStatus, () => init())
 
   function parseInput(value: string, format: string) {

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

@@ -57,7 +57,9 @@ export function useRangeControl(
   const fromDateRef = computed(() => rangeValueRef.value[0])
   const toDateRef = computed(() => rangeValueRef.value[1])
 
-  watch(valueRef, handleBufferUpdate)
+  watch([valueRef, formatRef], ([value]) => {
+    handleBufferUpdate(value)
+  })
 
   const getValidBufferValue = (value: Date | undefined, isFrom: boolean) => {
     if (isFrom) {