feat(comp:date-picker): add DatePickerPanel & DateRangePickerPanel

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

@@ -169,19 +169,19 @@ describe('DatePicker', () => {
     expect(wrapper.findComponent(DatePanel).isVisible()).toBeTruthy()
     expect(wrapper.findComponent(TimePanel).isVisible()).toBeFalsy()
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-time-input').trigger('focus')
+    await wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-time-input').trigger('focus')
     expect(wrapper.findComponent(DatePanel).isVisible()).toBeFalsy()
     expect(wrapper.findComponent(TimePanel).isVisible()).toBeTruthy()
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-date-input').trigger('focus')
+    await wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-date-input').trigger('focus')
     expect(wrapper.findComponent(DatePanel).isVisible()).toBeTruthy()
     expect(wrapper.findComponent(TimePanel).isVisible()).toBeFalsy()
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-time-input').trigger('input')
+    await wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-time-input').trigger('input')
     expect(wrapper.findComponent(DatePanel).isVisible()).toBeFalsy()
     expect(wrapper.findComponent(TimePanel).isVisible()).toBeTruthy()
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-date-input').trigger('input')
+    await wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-date-input').trigger('input')
     expect(wrapper.findComponent(DatePanel).isVisible()).toBeTruthy()
     expect(wrapper.findComponent(TimePanel).isVisible()).toBeFalsy()
   })
@@ -198,7 +198,7 @@ describe('DatePicker', () => {
       },
     })
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-time-input').trigger('focus')
+    await wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-time-input').trigger('focus')
 
     const timePanel = wrapper.findComponent(TimePanel) as VueWrapper<ɵTimePanelInstance>
 
@@ -234,14 +234,22 @@ describe('DatePicker', () => {
       },
     })
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-date-input').find('input').setValue('2021-11-22')
+    await wrapper
+      .findComponent(Content)
+      .find('.ix-date-picker-overlay-inputs-date-input')
+      .find('input')
+      .setValue('2021-11-22')
     expect(onUpdateValue).toBeCalledWith(new Date('2021-11-22 00:00:00'))
     expect(onChange).toBeCalledWith(new Date('2021-11-22 00:00:00'), new Date('2021-10-11 00:00:00'))
 
     onUpdateValue.mockClear()
     onChange.mockClear()
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-time-input').find('input').setValue('13:03:04')
+    await wrapper
+      .findComponent(Content)
+      .find('.ix-date-picker-overlay-inputs-time-input')
+      .find('input')
+      .setValue('13:03:04')
     expect(onUpdateValue).toBeCalledWith(new Date('2021-10-11 13:03:04'))
     expect(onChange).toBeCalledWith(new Date('2021-10-11 13:03:04'), new Date('2021-10-11 00:00:00'))
 
@@ -265,11 +273,11 @@ describe('DatePicker', () => {
     })
 
     expect(wrapper.find('.ix-date-picker').find('input').element.value).toBe('2021-10-11 13/03/04')
-    expect(wrapper.findComponent(Content).find('.ix-date-picker-board-date-input').find('input').element.value).toBe(
-      '2021年10月11日',
-    )
-    expect(wrapper.findComponent(Content).find('.ix-date-picker-board-time-input').find('input').element.value).toBe(
-      '13时03分04秒',
-    )
+    expect(
+      wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-date-input').find('input').element.value,
+    ).toBe('2021年10月11日')
+    expect(
+      wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-time-input').find('input').element.value,
+    ).toBe('13时03分04秒')
   })
 })

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

@@ -210,7 +210,10 @@ describe('DateRangePicker', () => {
       },
     })
 
-    await wrapper.findComponent(RangeContent).findAll('.ix-date-range-picker-board-time-input')[0].trigger('focus')
+    await wrapper
+      .findComponent(RangeContent)
+      .findAll('.ix-date-range-picker-overlay-inputs-time-input')[0]
+      .trigger('focus')
 
     const fromTimePanel = wrapper.findAllComponents(TimePanel)[0] as unknown as VueWrapper<ɵTimePanelInstance>
     const toTimePanel = wrapper.findAllComponents(TimePanel)[1] as unknown as VueWrapper<ɵTimePanelInstance>
@@ -247,11 +250,11 @@ describe('DateRangePicker', () => {
 
     const dateInputs = wrapper
       .findComponent(RangeContent)
-      .findAll('.ix-date-range-picker-board-date-input')
+      .findAll('.ix-date-range-picker-overlay-inputs-date-input')
       .map(el => el.find('input'))
     const timeInputs = wrapper
       .findComponent(RangeContent)
-      .findAll('.ix-date-range-picker-board-time-input')
+      .findAll('.ix-date-range-picker-overlay-inputs-time-input')
       .map(el => el.find('input'))
 
     await dateInputs[0].setValue('2021-11-22')

packages/components/date-picker/docs/Index.zh.md

@@ -25,6 +25,8 @@ order: 0
 | `disabled` | 是否禁用状态 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
 | `disabledDate` | 不可选择的日期 | `(date: Date) => boolean` | - | - | - |
 | `format` | 展示的格式 | `string` | - | ✅ | 默认值参见 `defaultFormat`, 更多用法参考[date-fns](https://date-fns.org/v2.27.0/docs/format) |
+| `timeFormat` | `'datetime'`下的时间格式 | `string` | - | ✅ | 全局配置同`TimePicker`的format, 仅在`'datetime'`类型下生效，可用于配置时间面板的列显示，参考[TimePicker](/components/time-picker/zh) |
+| `dateFormat` | `'datetime'`下的日期格式 | `string` | - | ✅ | 全局配置同`DatePicker`的`'date'`类型format, 仅在`'datetime'`类型下生效 |
 | `overlayClassName` | 日期面板的 `class`  | `string` | - | - | - |
 | `overlayContainer` | 自定义浮层容器节点 | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - |
 | `overlayRender` | 自定义日期面板内容的渲染  | `(children:VNode[]) => VNodeChild` | - | - | - |
@@ -71,11 +73,11 @@ const defaultFormat = {
 | `defaultOpenValue` | 打开面板时默认选中的值 | `number \| string \| Date` | - | - | `value` 为空时，高亮的值 |
 | `footer` | 自定义底部按钮 | `boolean \| ButtonProps[] \| VNode \| #footer` | `false` | - | 默认会根据 `type` 的不同渲染相应的按钮，如果传入 `false` 则不显示 |
 | `placeholder` | 选择框默认文本 | `string \| #placeholder` | - | - | 可以通过国际化配置默认值 |
-| `timePanelOptions` | 时间选择面板配置 | `TimePanelOptions` | `false` | - | 仅在 `type='datetime'` 时生效 |
+| `timePanelOptions` | 时间选择面板配置 | `PickerTimePanelOptions` | - | - | 仅在 `type='datetime'` 时生效 |
 | `onChange` | 值改变后的回调 | `(value: Date, oldValue: Date) => void` | - | - | - |
 | `onInput` | 输入后的回调 | `(evt: Event) => void` | - | - | - |
 
-#### TimePanelOptions
+#### PickerTimePanelOptions
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
@@ -98,10 +100,56 @@ const defaultFormat = {
 | `footer` | 自定义底部按钮 | `boolean \| ButtonProps[] \| VNode \| #footer` | `false` | - | 默认会根据 `type` 的不同渲染相应的按钮，如果传入 `false` 则不显示 |
 | `placeholder` | 选择框默认文本 | `string[] \| #placeholder=placement:'start'\|'end'` | - | - | 默认使用 `i18n` 配置 |
 | `separator` | 自定义分隔符图标 | `string \| VNode \| #separator` | - | ✅ | - |
-| `timePanelOptions` | 时间选择面板配置 | `TimePanelOptions \| TimePanelOptions[]` | `false` | - | 如果需要对前后的时间选择器配置不同的禁用条件，可以传入一个数组 |
+| `timePanelOptions` | 时间选择面板配置 | `PickerTimePanelOptions \| PickerTimePanelOptions[]` | - | - | 如果需要对前后的时间选择器使用不同配置，可以传入一个数组 |
 | `onChange` | 值改变后的回调 | `(value: Date[], oldValue: Date[]) => void` | - | - | - |
 | `onInput` | 输入后的回调 | `(isFrom: boolean, evt: Event) => void` | - | - | - |
 
+### IxDatePickerPanel
+
+#### DatePickerPanelProps
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `v-model:activeValue` | 当前激活状态的日期 | `Date` | - | - | 配合键盘操作使用 |
+| `cellTooltip` | 日期节点的tooltip | `(cell: { value: Date, disabled: boolean }) => string | void` | - | - | - |
+| `disabledDate` | 不可选择的日期 | `(date: Date) => boolean` | - | - | - |
+| `defaultOpenValue` | 打开面板时默认选中的值 | `Date` | - | - | - |
+| `type` | 设置选择器面板类型 | `'date' \| 'week' \| 'month' \| 'quarter' \| 'year' \| 'datetime'` | `'date'` | - | - |
+| `timePanelOptions` | 时间选择面板配置 | `TimePanelOptions` | - | - | - |
+| `visiblePanel` | 当前可见的面板 | `'datePanel' \| 'timePanel'` | - | - | 在非 `datetime` 类型时，`timepanel` 无效 |
+| `onChange` | 值改变后的回调 | `(value: Date | undefined) => void` | - | - | - |
+
+### IxDateRangePickerPanel
+
+#### DateRangePickerPanelProps
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `v-model:activeValue` | 当前激活状态的日期 | `Date[]` | - | - | 配合键盘操作使用 |
+| `cellTooltip` | 日期节点的tooltip | `(cell: { value: Date, disabled: boolean }) => string | void` | - | - | - |
+| `disabledDate` | 不可选择的日期 | `(date: Date) => boolean` | - | - | - |
+| `defaultOpenValue` | 打开面板时默认选中的值 | `Date[]` | - | - | - |
+| `type` | 设置选择器面板类型 | `'date' \| 'week' \| 'month' \| 'quarter' \| 'year' \| 'datetime'` | `'date'` | - | - |
+| `timePanelOptions` | 时间选择面板配置 | `TimePanelOptions \| TimePanelOptions[]` | - | - | 如果需要对前后的时间选择器使用不同配置，可以传入一个数组 |
+| `visiblePanel` | 当前可见的面板 | `'datePanel' \| 'timePanel'` | - | - | 在非 `datetime` 类型时，`timepanel` 无效 |
+| `onChange` | 值改变后的回调 | `(value: Date[] | undefined) => void` | - | - | - |
+
+#### TimePanelOptions
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `disabledHours` | 禁用部分小时选项 | `(selectedAmPm: string | undefined) => number[]` | ``() => []`` | - | - |
+| `disabledMinutes` | 禁用部分分钟选项 | `(selectedHour: number | undefined, selectedAmPm: string | undefined) => number[]` | `() => []` | - | - |
+| `disabledSeconds` | 禁用部分秒选项 | `(selectedHour: number | undefined, selectedMinute: number | undefined, selectedAmPm: string | undefined)=>number[]` | `() => []` | - | - |
+| `hideDisabledOptions` | 隐藏禁止选择的options |`boolean` |`false` | - | - |
+| `hourStep` | 小时选项的间隔 | `number` | `1` | - | - |
+| `minuteStep` | 分钟选项的间隔 | `number` | `1` | - | - |
+| `secondStep` | 秒选项的间隔 | `number` | `1` | - | - |
+| `hourEnabled` | 是否显示小时选择列 | `boolean` | `true` | - | - |
+| `minuteEnabled` | 是否显示分钟选择列 | `boolean` | `true` | - | - |
+| `secondEnabled` | 是否显示秒选择列 | `boolean` | `true` | - | - |
+| `use12Hours` | 是否显示AM\PM选择列 | `boolean` | `false` | - | - |
+
 <!--- insert less variable begin  --->
 ## 主题变量
 
@@ -110,49 +158,49 @@ const defaultFormat = {
 | `@date-picker-line-height` | `@form-line-height` | - | - |
 | `@date-picker-color` | `@form-color` | - | - |
 | `@date-range-picker-trigger-separator-margin` | `@spacing-xl` | - | - |
-| `@date-picker-panel-font-size` | `@font-size-md` | - | - |
-| `@date-picker-panel-color` | `@text-color` | - | - |
-| `@date-picker-panel-color-inverse` | `@text-color-inverse` | - | - |
-| `@date-picker-panel-active-color` | `@color-primary` | - | - |
-| `@date-picker-panel-in-range-color` | `@color-blue-l50` | - | - |
-| `@date-picker-panel-disabled-color` | `@text-color-disabled` | - | - |
-| `@date-picker-panel-disabled-background-color` | `@color-graphite-l50` | - | - |
-| `@date-picker-panel-background-color` | `@background-color-component` | - | - |
-| `@date-picker-panel-border-width` | `@border-width-sm` | - | - |
-| `@date-picker-panel-border-style` | `@border-style` | - | - |
-| `@date-picker-panel-border-color` | `@border-color` | - | - |
-| `@date-picker-panel-header-padding` | `0 0 @spacing-xs 0` | - | - |
-| `@date-picker-panel-header-height` | `@height-md` | - | - |
-| `@date-picker-panel-header-item-padding` | `0 @spacing-xs` | - | - |
-| `@date-picker-panel-header-border-bottom` | `none` | - | - |
-| `@date-picker-panel-header-button-font-size` | `@font-size-lg` | - | - |
-| `@date-picker-panel-header-button-font-weight` | `@font-weight-lg` | - | - |
-| `@date-picker-panel-header-content-spacing` | `@spacing-lg` | - | - |
-| `@date-picker-panel-header-padding-lg` | `0 0 @spacing-2xl` | - | - |
-| `@date-picker-panel-body-padding` | `0` | - | - |
-| `@date-picker-panel-body-padding-lg` | `0` | - | - |
-| `@date-picker-panel-body-font-size` | `@font-size-md` | - | - |
-| `@date-picker-panel-body-header-margin-bottom` | `@spacing-md` | - | - |
-| `@date-picker-panel-body-header-font-weight` | `@font-weight-md` | - | - |
-| `@date-picker-panel-body-header-background-color` | `@color-graphite-l50` | - | - |
-| `@date-picker-panel-cell-width` | `28px` | - | - |
-| `@date-picker-panel-cell-height` | `28px` | - | - |
-| `@date-picker-panel-cell-width-lg` | `52px` | - | - |
-| `@date-picker-panel-cell-height-lg` | `24px` | - | - |
-| `@date-picker-panel-cell-padding` | `2px 0` | - | - |
-| `@date-picker-panel-cell-inner-padding` | `4px` | - | - |
-| `@date-picker-panel-cell-padding-lg` | `@spacing-lg 0` | - | - |
-| `@date-picker-panel-cell-inner-padding-lg` | `0` | - | - |
-| `@date-picker-panel-cell-trigger-width` | `20px` | - | - |
-| `@date-picker-panel-cell-trigger-height` | `20px` | - | - |
-| `@date-picker-panel-cell-trigger-width-lg` | `52px` | - | - |
-| `@date-picker-panel-cell-trigger-height-lg` | `24px` | - | - |
-| `@date-picker-panel-cell-border-radius` | `@border-radius-full` | - | - |
-| `@date-picker-panel-cell-border-radius-lg` | `@border-radius-sm` | - | - |
-| `@date-picker-panel-cell-hover-background-color` | `@color-graphite-l50` | - | - |
-| `@date-picker-panel-cell-hover-color` | `@color-primary` | - | - |
-| `@date-picker-panel-cell-current-border-color` | `@color-blue-l40` | - | - |
-| `@date-picker-panel-cell-current-color` | `@color-primary` | - | - |
+| `@date-panel-font-size` | `@font-size-md` | - | - |
+| `@date-panel-color` | `@text-color` | - | - |
+| `@date-panel-color-inverse` | `@text-color-inverse` | - | - |
+| `@date-panel-active-color` | `@color-primary` | - | - |
+| `@date-panel-in-range-color` | `@color-blue-l50` | - | - |
+| `@date-panel-disabled-color` | `@text-color-disabled` | - | - |
+| `@date-panel-disabled-background-color` | `@color-graphite-l50` | - | - |
+| `@date-panel-background-color` | `@background-color-component` | - | - |
+| `@date-panel-border-width` | `@border-width-sm` | - | - |
+| `@date-panel-border-style` | `@border-style` | - | - |
+| `@date-panel-border-color` | `@border-color` | - | - |
+| `@date-panel-header-padding` | `0 0 @spacing-xs 0` | - | - |
+| `@date-panel-header-height` | `@height-md` | - | - |
+| `@date-panel-header-item-padding` | `0 @spacing-xs` | - | - |
+| `@date-panel-header-border-bottom` | `none` | - | - |
+| `@date-panel-header-button-font-size` | `@font-size-lg` | - | - |
+| `@date-panel-header-button-font-weight` | `@font-weight-lg` | - | - |
+| `@date-panel-header-content-spacing` | `@spacing-lg` | - | - |
+| `@date-panel-header-padding-lg` | `0 0 @spacing-2xl` | - | - |
+| `@date-panel-body-padding` | `0` | - | - |
+| `@date-panel-body-padding-lg` | `0` | - | - |
+| `@date-panel-body-font-size` | `@font-size-md` | - | - |
+| `@date-panel-body-header-margin-bottom` | `@spacing-md` | - | - |
+| `@date-panel-body-header-font-weight` | `@font-weight-md` | - | - |
+| `@date-panel-body-header-background-color` | `@color-graphite-l50` | - | - |
+| `@date-panel-cell-width` | `28px` | - | - |
+| `@date-panel-cell-height` | `28px` | - | - |
+| `@date-panel-cell-width-lg` | `52px` | - | - |
+| `@date-panel-cell-height-lg` | `24px` | - | - |
+| `@date-panel-cell-padding` | `2px 0` | - | - |
+| `@date-panel-cell-inner-padding` | `4px` | - | - |
+| `@date-panel-cell-padding-lg` | `@spacing-lg 0` | - | - |
+| `@date-panel-cell-inner-padding-lg` | `0` | - | - |
+| `@date-panel-cell-trigger-width` | `20px` | - | - |
+| `@date-panel-cell-trigger-height` | `20px` | - | - |
+| `@date-panel-cell-trigger-width-lg` | `52px` | - | - |
+| `@date-panel-cell-trigger-height-lg` | `24px` | - | - |
+| `@date-panel-cell-border-radius` | `@border-radius-full` | - | - |
+| `@date-panel-cell-border-radius-lg` | `@border-radius-sm` | - | - |
+| `@date-panel-cell-hover-background-color` | `@color-graphite-l50` | - | - |
+| `@date-panel-cell-hover-color` | `@color-primary` | - | - |
+| `@date-panel-cell-current-border-color` | `@color-blue-l40` | - | - |
+| `@date-panel-cell-current-color` | `@color-primary` | - | - |
 | `@date-picker-overlay-footer-border-width` | `@form-border-width` | - | - |
 | `@date-picker-overlay-footer-border-style` | `@form-border-style` | - | - |
 | `@date-picker-overlay-footer-border-color` | `@form-border-color` | - | - |
@@ -178,10 +226,15 @@ const defaultFormat = {
 | `@date-range-picker-overlay-footer-border-color` | `@color-graphite-l30` | - | - |
 | `@date-range-picker-overlay-footer-padding` | `@spacing-sm 0` | - | - |
 | `@date-range-picker-overlay-footer-button-margin-left` | `@date-picker-overlay-footer-button-margin-left` | - | - |
+| `@date-picker-panel-width` | `220px` | - | - |
+| `@date-picker-panel-max-height` | `260px` | - | - |
 | `@date-range-picker-panel-width` | `220px` | - | - |
 | `@date-range-picker-panel-max-height` | `260px` | - | - |
 | `@date-range-picker-panel-border-width` | `0` | - | - |
 | `@date-range-picker-panel-border-style` | `none` | - | - |
 | `@date-range-picker-panel-border-color` | `none` | - | - |
 | `@date-range-picker-panel-border-radius` | `0` | - | - |
+| `@date-range-picker-panel-separator-margin` | `0 @spacing-lg` | - | - |
+| `@date-range-picker-panel-separator-width` | `1px` | - | - |
+| `@date-range-picker-panel-separator-color` | `@date-panel-border-color` | - | - |
 <!--- insert less variable end  --->

packages/components/date-picker/index.ts

@@ -5,21 +5,31 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { DatePickerComponent, DateRangePickerComponent } from './src/types'
+import type { DatePickerComponent, DatePickerPanelComponent, DateRangePickerComponent } from './src/types'
 
 import DatePicker from './src/DatePicker'
 import DateRangePicker from './src/DateRangePicker'
+import DatePickerPanel from './src/panel/Panel'
+import DateRangePickerPanel from './src/panel/RangePanel'
 
 const IxDatePicker = DatePicker as unknown as DatePickerComponent
+const IxDatePickerPanel = DatePickerPanel as unknown as DatePickerPanelComponent
 const IxDateRangePicker = DateRangePicker as unknown as DateRangePickerComponent
+const IxDateRangePickerPanel = DateRangePickerPanel as unknown as DateRangePickerComponent
 
-export { IxDatePicker, IxDateRangePicker }
+export { IxDatePicker, IxDatePickerPanel, IxDateRangePicker, IxDateRangePickerPanel }
 
 export type {
   DatePickerInstance,
   DatePickerComponent,
   DatePickerPublicProps as DatePickerProps,
+  DatePickerPanelInstance,
+  DatePickerPanelComponent,
+  DatePickerPanelPublicProps as DatePickerPanelProps,
   DateRangePickerInstance,
   DateRangePickerComponent,
   DateRangePickerPublicProps as DateRangePickerProps,
+  DateRangePickerPanelInstance,
+  DateRangePickerPanelComponent,
+  DateRangePickerPanelPublicProps as DateRangePickerPanelProps,
 } from './src/types'