From f047d5a0bab22b1648089606976a35360938e803 Mon Sep 17 00:00:00 2001 From: jmni-cn <1711008052@qq.com> Date: Thu, 16 Oct 2025 12:45:34 +0800 Subject: [PATCH 1/3] feat(date-picker): add singlePanel debug API --- .../demos/zhCN/index.demo-entry.md | 1 + .../demos/zhCN/single-panel-debug.demo.vue | 28 +++ src/date-picker/src/DatePicker.tsx | 1 + src/date-picker/src/panel/daterange.tsx | 188 +++++++++--------- src/date-picker/src/panel/use-panel-common.ts | 1 + src/date-picker/src/props.ts | 1 + 6 files changed, 128 insertions(+), 92 deletions(-) create mode 100644 src/date-picker/demos/zhCN/single-panel-debug.demo.vue diff --git a/src/date-picker/demos/zhCN/index.demo-entry.md b/src/date-picker/demos/zhCN/index.demo-entry.md index 47de63e9fd6..eeed1e06e05 100644 --- a/src/date-picker/demos/zhCN/index.demo-entry.md +++ b/src/date-picker/demos/zhCN/index.demo-entry.md @@ -31,6 +31,7 @@ icon.vue panel.vue panel-debug.vue form-debug.vue +single-panel-debug.vue ``` ## API diff --git a/src/date-picker/demos/zhCN/single-panel-debug.demo.vue b/src/date-picker/demos/zhCN/single-panel-debug.demo.vue new file mode 100644 index 00000000000..6f50d83497f --- /dev/null +++ b/src/date-picker/demos/zhCN/single-panel-debug.demo.vue @@ -0,0 +1,28 @@ + +# 单面板 日期范围 Debug + +仅daterange，datetimerange 待完善UI + + + + + diff --git a/src/date-picker/src/DatePicker.tsx b/src/date-picker/src/DatePicker.tsx index e919eccdbcf..d114326c19b 100644 --- a/src/date-picker/src/DatePicker.tsx +++ b/src/date-picker/src/DatePicker.tsx @@ -977,6 +977,7 @@ export default defineComponent({ defaultTime: this.defaultTime, themeClass: this.themeClass, panel: this.panel, + singlePanel: this.singlePanel, inputReadonly: this.inputReadonly || this.mergedDisabled, onRender: this.onRender, onNextMonth: this.onNextMonth, diff --git a/src/date-picker/src/panel/daterange.tsx b/src/date-picker/src/panel/daterange.tsx index b364ca3d2b8..28cfaf3c94a 100644 --- a/src/date-picker/src/panel/daterange.tsx +++ b/src/date-picker/src/panel/daterange.tsx @@ -156,105 +156,109 @@ export default defineComponent({ ))} -
-
-
-
- {resolveSlot(datePickerSlots['prev-year'], () => [ - - ])} -
-
- {resolveSlot(datePickerSlots['prev-month'], () => [ - - ])} -
- -
- {resolveSlot(datePickerSlots['next-month'], () => [ - - ])} -
-
- {resolveSlot(datePickerSlots['next-year'], () => [ - - ])} -
-
-
- {this.weekdays.map(weekday => ( + {!this.singlePanel ? ( +
+ ) : null} + {!this.singlePanel ? ( +
+
- {weekday} + {resolveSlot(datePickerSlots['prev-year'], () => [ + + ])}
- ))} -
-
-
- {this.endDateArray.map((dateItem, i) => (
{ - this.handleDateClick(dateItem) - }} - onMouseenter={() => { - this.handleDateMouseEnter(dateItem) - }} + class={`${mergedClsPrefix}-date-panel-month__prev`} + onClick={this.endCalendarPrevMonth} > -
- {dateItem.dateObject.date} - {dateItem.isCurrentDate ? ( -
- ) : null} + {resolveSlot(datePickerSlots['prev-month'], () => [ + + ])}
- ))} + +
+ {resolveSlot(datePickerSlots['next-month'], () => [ + + ])} +
+
+ {resolveSlot(datePickerSlots['next-year'], () => [ + + ])} +
+
+
+ {this.weekdays.map(weekday => ( +
+ {weekday} +
+ ))} +
+
+
+ {this.endDateArray.map((dateItem, i) => ( +
{ + this.handleDateClick(dateItem) + }} + onMouseenter={() => { + this.handleDateMouseEnter(dateItem) + }} + > +
+ {dateItem.dateObject.date} + {dateItem.isCurrentDate ? ( +
+ ) : null} +
+ ))} +
-
+ ) : null} {this.datePickerSlots.footer ? (
{this.datePickerSlots.footer()} diff --git a/src/date-picker/src/panel/use-panel-common.ts b/src/date-picker/src/panel/use-panel-common.ts index 32103b1775e..5e98141e066 100644 --- a/src/date-picker/src/panel/use-panel-common.ts +++ b/src/date-picker/src/panel/use-panel-common.ts @@ -48,6 +48,7 @@ const usePanelCommonProps = { themeClass: String, onRender: Function as PropType<(() => void) | undefined>, panel: Boolean, + singlePanel: Boolean, onNextMonth: Function as PropType<() => void>, onPrevMonth: Function as PropType<() => void>, onNextYear: Function as PropType<() => void>, diff --git a/src/date-picker/src/props.ts b/src/date-picker/src/props.ts index fb8c92eb85c..0cfc4665fe2 100644 --- a/src/date-picker/src/props.ts +++ b/src/date-picker/src/props.ts @@ -76,6 +76,7 @@ export const datePickerProps = { default: undefined }, panel: Boolean, + singlePanel: Boolean, ranges: Object as PropType>, firstDayOfWeek: Number as PropType, inputReadonly: Boolean, From d5c9032eda6f8997349b9ccb1b33e49304f0e007 Mon Sep 17 00:00:00 2001 From: jmni-cn <1711008052@qq.com> Date: Thu, 16 Oct 2025 13:27:41 +0800 Subject: [PATCH 2/3] chore: add Changelog --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + .../demos/enUS/index.demo-entry.md | 2 ++ .../single-panel.demo.vue} | 4 +-- .../demos/zhCN/index.demo-entry.md | 3 +- .../demos/zhCN/single-panel.demo.vue | 28 +++++++++++++++++++ 6 files changed, 36 insertions(+), 3 deletions(-) rename src/date-picker/demos/{zhCN/single-panel-debug.demo.vue => enUS/single-panel.demo.vue} (85%) create mode 100644 src/date-picker/demos/zhCN/single-panel.demo.vue diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index f67b6c48486..cdf9d5041e6 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -12,6 +12,7 @@ - `n-date-picker` prop `defaultTime` can also accept a function that will return a formatted string - `n-steps` adds `content-placement` prop, closes [#7044](https://github.com/tusen-ai/naive-ui/issues/7044). +- `n-date-picker` adds `single-panel` 支持 `type="daterange"` 选择日期范围时打开单面板 ## 2.43.1 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 2d9976d2a57..b6bf4080d87 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -12,6 +12,7 @@ - `n-date-picker` 的 `defaultTime` 属性可以接受返回格式化字符串的函数 - `n-steps` 增加 `content-placement` 属性，关闭 [#7044](https://github.com/tusen-ai/naive-ui/issues/7044) +- `n-date-picker` 新增 `single-panel` 支持 `type="daterange"` 选择日期范围时打开单面板 ## 2.43.1 diff --git a/src/date-picker/demos/enUS/index.demo-entry.md b/src/date-picker/demos/enUS/index.demo-entry.md index 2d97dff2e97..b8375a0d663 100644 --- a/src/date-picker/demos/enUS/index.demo-entry.md +++ b/src/date-picker/demos/enUS/index.demo-entry.md @@ -31,6 +31,7 @@ focus.vue status.vue icon.vue panel.vue +single-panel.vue ``` ## API @@ -113,6 +114,7 @@ panel.vue | default-calendar-start-time | `number` | `undefined` | Default panel calendar start month timestamp. | 2.28.3 | | default-calendar-end-time | `number` | `undefined` | Default panel calendar end month timestamp. | 2.28.3 | | end-placeholder | `string` | `'End Date'` | Placeholder at end part of the input. | | +| single-panel | `boolean` | `false` | Whether to use a single panel | NEXT_VERSION | | format | `string` | `'yyyy-MM-dd'` | Format of the input. For detail please see [format](https://date-fns.org/v2.23.0/docs/format). | | | is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | Validator of the date. | `detail` 2.37.1 | | is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: (hour: number) => boolean, isMinuteDisabled?: (minute: number, hour: number \| null) => boolean, isSecondDisabled?: (second: number, minute: number \| null, hour: number \| null) => boolean }` | `undefined` | Validator of the time. `null` in validators means value of picker is empty. | | diff --git a/src/date-picker/demos/zhCN/single-panel-debug.demo.vue b/src/date-picker/demos/enUS/single-panel.demo.vue similarity index 85% rename from src/date-picker/demos/zhCN/single-panel-debug.demo.vue rename to src/date-picker/demos/enUS/single-panel.demo.vue index 6f50d83497f..b7989fcb971 100644 --- a/src/date-picker/demos/zhCN/single-panel-debug.demo.vue +++ b/src/date-picker/demos/enUS/single-panel.demo.vue @@ -1,7 +1,7 @@ -# 单面板 日期范围 Debug +# Single panel -仅daterange，datetimerange 待完善UI +It is valid when type is daterange + + From 1cdd04b0e9ecb2bb8005f05dc88c013a7e49acf7 Mon Sep 17 00:00:00 2001 From: jmni-cn <1711008052@qq.com> Date: Thu, 16 Oct 2025 13:30:05 +0800 Subject: [PATCH 3/3] chore: rule --- src/date-picker/demos/enUS/single-panel.demo.vue | 2 +- src/date-picker/demos/zhCN/single-panel.demo.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/date-picker/demos/enUS/single-panel.demo.vue b/src/date-picker/demos/enUS/single-panel.demo.vue index b7989fcb971..7bea9b70df9 100644 --- a/src/date-picker/demos/enUS/single-panel.demo.vue +++ b/src/date-picker/demos/enUS/single-panel.demo.vue @@ -1,7 +1,7 @@ # Single panel -It is valid when type is daterange +It is valid when type is daterange.