feat(date-picker): add singlePanel API

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
 

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
 

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. |  |

src/date-picker/demos/enUS/single-panel.demo.vue

@@ -0,0 +1,28 @@
+<markdown>
+# Single panel
+
+It is valid when type is daterange.
+</markdown>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const range = ref<[number, number]>([Date.now(), Date.now()])
+</script>
+
+<template>
+  <n-date-picker
+    v-model:value="range"
+    type="daterange"
+    single-panel
+    clearable
+  />
+  <n-date-picker
+    v-model:value="range"
+    type="daterange"
+    panel
+    single-panel
+    clearable
+  />
+  <pre>{{ JSON.stringify(range) }}</pre>
+</template>

src/date-picker/demos/zhCN/index.demo-entry.md

@@ -29,6 +29,7 @@ footerslot.vue
 status.vue
 icon.vue
 panel.vue
+single-panel.vue
 panel-debug.vue
 form-debug.vue
 ```
@@ -113,6 +114,7 @@ form-debug.vue
 | bind-calendar-months | `boolean` | `false` | 面板月份是否连续 | 2.28.3 |
 | default-calendar-start-time | `number` | `undefined` | 面板日历默认开始的月份时间戳 | 2.28.3 |
 | default-calendar-end-time | `number` | `undefined` | 面板日历默认结束的月份时间戳 | 2.28.3 |
+| single-panel | `boolean` | `false` | 是否使用单面板 | NEXT_VERSION |
 | format | `string` | `'yyyy-MM-dd'` | 时间格式化字符串，详情见 [format](https://date-fns.org/v2.23.0/docs/format) |  |
 | is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | 日期禁用的校验函数 |  |
 | 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` | 时间禁用的校验函数，校验函数中的 `null` 表示当前没有选中值 |  |

src/date-picker/demos/zhCN/single-panel.demo.vue

@@ -0,0 +1,28 @@
+<markdown>
+# 单面板
+
+type为daterange时有效。
+</markdown>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const range = ref<[number, number]>([Date.now(), Date.now()])
+</script>
+
+<template>
+  <n-date-picker
+    v-model:value="range"
+    type="daterange"
+    single-panel
+    clearable
+  />
+  <n-date-picker
+    v-model:value="range"
+    type="daterange"
+    panel
+    single-panel
+    clearable
+  />
+  <pre>{{ JSON.stringify(range) }}</pre>
+</template>

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,

src/date-picker/src/panel/daterange.tsx

@@ -156,105 +156,109 @@ export default defineComponent({
             ))}
           </div>
         </div>
-        <div class={`${mergedClsPrefix}-date-panel__vertical-divider`} />
-        <div
-          ref="endDatesElRef"
-          class={`${mergedClsPrefix}-date-panel-calendar ${mergedClsPrefix}-date-panel-calendar--end`}
-        >
-          <div class={`${mergedClsPrefix}-date-panel-month`}>
-            <div
-              class={`${mergedClsPrefix}-date-panel-month__fast-prev`}
-              onClick={this.endCalendarPrevYear}
-            >
-              {resolveSlot(datePickerSlots['prev-year'], () => [
-                <FastBackwardIcon />
-              ])}
-            </div>
-            <div
-              class={`${mergedClsPrefix}-date-panel-month__prev`}
-              onClick={this.endCalendarPrevMonth}
-            >
-              {resolveSlot(datePickerSlots['prev-month'], () => [
-                <BackwardIcon />
-              ])}
-            </div>
-            <PanelHeader
-              monthYearSeparator={this.calendarHeaderMonthYearSeparator}
-              monthBeforeYear={this.calendarMonthBeforeYear}
-              value={this.endCalendarDateTime}
-              onUpdateValue={this.onUpdateEndCalendarValue}
-              mergedClsPrefix={mergedClsPrefix}
-              calendarMonth={this.endCalendarMonth}
-              calendarYear={this.endCalendarYear}
-            />
-            <div
-              class={`${mergedClsPrefix}-date-panel-month__next`}
-              onClick={this.endCalendarNextMonth}
-            >
-              {resolveSlot(datePickerSlots['next-month'], () => [
-                <ForwardIcon />
-              ])}
-            </div>
-            <div
-              class={`${mergedClsPrefix}-date-panel-month__fast-next`}
-              onClick={this.endCalendarNextYear}
-            >
-              {resolveSlot(datePickerSlots['next-year'], () => [
-                <FastForwardIcon />
-              ])}
-            </div>
-          </div>
-          <div class={`${mergedClsPrefix}-date-panel-weekdays`}>
-            {this.weekdays.map(weekday => (
+        {!this.singlePanel ? (
+          <div class={`${mergedClsPrefix}-date-panel__vertical-divider`} />
+        ) : null}
+        {!this.singlePanel ? (
+          <div
+            ref="endDatesElRef"
+            class={`${mergedClsPrefix}-date-panel-calendar ${mergedClsPrefix}-date-panel-calendar--end`}
+          >
+            <div class={`${mergedClsPrefix}-date-panel-month`}>
               <div
-                key={weekday}
-                class={`${mergedClsPrefix}-date-panel-weekdays__day`}
+                class={`${mergedClsPrefix}-date-panel-month__fast-prev`}
+                onClick={this.endCalendarPrevYear}
               >
-                {weekday}
+                {resolveSlot(datePickerSlots['prev-year'], () => [
+                  <FastBackwardIcon />
+                ])}
               </div>
-            ))}
-          </div>
-          <div class={`${mergedClsPrefix}-date-panel__divider`} />
-          <div class={`${mergedClsPrefix}-date-panel-dates`}>
-            {this.endDateArray.map((dateItem, i) => (
               <div
-                data-n-date
-                key={i}
-                class={[
-                  `${mergedClsPrefix}-date-panel-date`,
-                  {
-                    [`${mergedClsPrefix}-date-panel-date--excluded`]:
-                      !dateItem.inCurrentMonth,
-                    [`${mergedClsPrefix}-date-panel-date--current`]:
-                      dateItem.isCurrentDate,
-                    [`${mergedClsPrefix}-date-panel-date--selected`]:
-                      dateItem.selected,
-                    [`${mergedClsPrefix}-date-panel-date--covered`]:
-                      dateItem.inSpan,
-                    [`${mergedClsPrefix}-date-panel-date--start`]:
-                      dateItem.startOfSpan,
-                    [`${mergedClsPrefix}-date-panel-date--end`]:
-                      dateItem.endOfSpan,
-                    [`${mergedClsPrefix}-date-panel-date--disabled`]:
-                      this.mergedIsDateDisabled(dateItem.ts)
-                  }
-                ]}
-                onClick={() => {
-                  this.handleDateClick(dateItem)
-                }}
-                onMouseenter={() => {
-                  this.handleDateMouseEnter(dateItem)
-                }}
+                class={`${mergedClsPrefix}-date-panel-month__prev`}
+                onClick={this.endCalendarPrevMonth}
               >
-                <div class={`${mergedClsPrefix}-date-panel-date__trigger`} />
-                {dateItem.dateObject.date}
-                {dateItem.isCurrentDate ? (
-                  <div class={`${mergedClsPrefix}-date-panel-date__sup`} />
-                ) : null}
+                {resolveSlot(datePickerSlots['prev-month'], () => [
+                  <BackwardIcon />
+                ])}
               </div>
-            ))}
+              <PanelHeader
+                monthYearSeparator={this.calendarHeaderMonthYearSeparator}
+                monthBeforeYear={this.calendarMonthBeforeYear}
+                value={this.endCalendarDateTime}
+                onUpdateValue={this.onUpdateEndCalendarValue}
+                mergedClsPrefix={mergedClsPrefix}
+                calendarMonth={this.endCalendarMonth}
+                calendarYear={this.endCalendarYear}
+              />
+              <div
+                class={`${mergedClsPrefix}-date-panel-month__next`}
+                onClick={this.endCalendarNextMonth}
+              >
+                {resolveSlot(datePickerSlots['next-month'], () => [
+                  <ForwardIcon />
+                ])}
+              </div>
+              <div
+                class={`${mergedClsPrefix}-date-panel-month__fast-next`}
+                onClick={this.endCalendarNextYear}
+              >
+                {resolveSlot(datePickerSlots['next-year'], () => [
+                  <FastForwardIcon />
+                ])}
+              </div>
+            </div>
+            <div class={`${mergedClsPrefix}-date-panel-weekdays`}>
+              {this.weekdays.map(weekday => (
+                <div
+                  key={weekday}
+                  class={`${mergedClsPrefix}-date-panel-weekdays__day`}
+                >
+                  {weekday}
+                </div>
+              ))}
+            </div>
+            <div class={`${mergedClsPrefix}-date-panel__divider`} />
+            <div class={`${mergedClsPrefix}-date-panel-dates`}>
+              {this.endDateArray.map((dateItem, i) => (
+                <div
+                  data-n-date
+                  key={i}
+                  class={[
+                    `${mergedClsPrefix}-date-panel-date`,
+                    {
+                      [`${mergedClsPrefix}-date-panel-date--excluded`]:
+                        !dateItem.inCurrentMonth,
+                      [`${mergedClsPrefix}-date-panel-date--current`]:
+                        dateItem.isCurrentDate,
+                      [`${mergedClsPrefix}-date-panel-date--selected`]:
+                        dateItem.selected,
+                      [`${mergedClsPrefix}-date-panel-date--covered`]:
+                        dateItem.inSpan,
+                      [`${mergedClsPrefix}-date-panel-date--start`]:
+                        dateItem.startOfSpan,
+                      [`${mergedClsPrefix}-date-panel-date--end`]:
+                        dateItem.endOfSpan,
+                      [`${mergedClsPrefix}-date-panel-date--disabled`]:
+                        this.mergedIsDateDisabled(dateItem.ts)
+                    }
+                  ]}
+                  onClick={() => {
+                    this.handleDateClick(dateItem)
+                  }}
+                  onMouseenter={() => {
+                    this.handleDateMouseEnter(dateItem)
+                  }}
+                >
+                  <div class={`${mergedClsPrefix}-date-panel-date__trigger`} />
+                  {dateItem.dateObject.date}
+                  {dateItem.isCurrentDate ? (
+                    <div class={`${mergedClsPrefix}-date-panel-date__sup`} />
+                  ) : null}
+                </div>
+              ))}
+            </div>
           </div>
-        </div>
+        ) : null}
         {this.datePickerSlots.footer ? (
           <div class={`${mergedClsPrefix}-date-panel-footer`}>
             {this.datePickerSlots.footer()}

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>,

src/date-picker/src/props.ts

@@ -76,6 +76,7 @@ export const datePickerProps = {
     default: undefined
   },
   panel: Boolean,
+  singlePanel: Boolean,
   ranges: Object as PropType<Record<string, [number, number]>>,
   firstDayOfWeek: Number as PropType<FirstDayOfWeek>,
   inputReadonly: Boolean,