mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(date-picker): adds calendar-day-format, calendar-header-year-format, calendar-header-month-format, calendar-header-month-before-year and calendar-header-month-year-separator props

Browse Source
This commit is contained in:
07akioni 2024-11-24 20:58:38 +08:00
parent accd27c695
commit 53ac284bb3
15 changed files with 93 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.en-US.md
View File

@ -12,8 +12,13 @@
### Features
- 🌟 Adds `n-marquee` component.
- `n-image` adds `error` slot, closes [#5649](https://github.com/tusen-ai/naive-ui/issues/5649)
- `n-image` adds `error` slot, closes [#5649](https://github.com/tusen-ai/naive-ui/issues/5649).
- `n-date-picker` adds `date-format` prop.
- `n-date-picker` adds `calendar-day-format` prop.
- `n-date-picker` adds `calendar-header-year-format` prop.
- `n-date-picker` adds `calendar-header-month-format` prop.
- `n-date-picker` adds `calendar-header-month-before-year` prop.
- `n-date-picker` adds `calendar-header-month-year-separator` prop.
- `n-progress`'s `color` prop supports gradient config.
- `n-select` adds `font-weight` theme variable
- `n-input` adds `font-weight` theme variable

5
CHANGELOG.zh-CN.md
View File

@ -14,6 +14,11 @@
- 🌟 新增 `n-marquee` 组件
- `n-image` 新增 `error` 插槽，关闭 [#5649](https://github.com/tusen-ai/naive-ui/issues/5649)
- `n-date-picker` 新增 `date-format` 属性
- `n-date-picker` 新增 `calendar-day-format` 属性
- `n-date-picker` 新增 `calendar-header-year-format` 属性
- `n-date-picker` 新增 `calendar-header-month-format` 属性
- `n-date-picker` 新增 `calendar-header-month-before-year` 属性
- `n-date-picker` 新增 `calendar-header-month-year-separator` 属性
- `n-progress` 的 `color` 属性支持渐变色配置
- `n-select` 新增 `font-weight` 主题变量
- `n-input` 新增 `font-weight` 主题变量

5
src/date-picker/demos/enUS/index.demo-entry.md
View File

@ -39,6 +39,11 @@ panel.vue
| Name | Type | Default | Description | Version |
| --- | --- | --- | --- | --- |
| calendar-day-format | `string` | `undefined` | Weekday format inside popup panel. | NEXT_VERSION |
| calendar-header-year-format | `string` | `undefined` | Year format inside the header of popup panel's calendar. | NEXT_VERSION |
| calendar-header-month-format | `string` | `undefined` | Month format inside the header of popup panel's calendar. | NEXT_VERSION |
| calendar-header-month-before-year | `string` | `undefined` | Whether to show month before year inside the header of popup panel's calender. | NEXT_VERSION |
| calendar-header-month-year-separator | `string` | `' '` | Separator between month and year inside the header of popup panel's calendar. | NEXT_VERSION |
| clearable | `boolean` | `false` | Whether the date picker is clearable. | |
| date-format | `string` | `undefined` | Date input format inside popup panel. | NEXT_VERSION |
| default-value | `number \| [number, number] \| null` | `undefined` | Date picker's default value. | |

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

@ -39,6 +39,11 @@ form-debug.vue
| 名称 | 类型 | 默认值 | 说明 | 版本 |
| --- | --- | --- | --- | --- |
| calendar-day-format | `string` | `undefined` | 选择面板内部星期几的格式 | NEXT_VERSION |
| calendar-header-year-format | `string` | `undefined` | 选择面板内部年的格式 | NEXT_VERSION |
| calendar-header-month-format | `string` | `undefined` | 选择面板内部月的格式 | NEXT_VERSION |
| calendar-header-month-before-year | `string` | `undefined` | 选择面板内部月是否显示在年的前面 | NEXT_VERSION |
| calendar-header-month-year-separator | `string` | `' '` | 选择面板内部年和月的分隔字符 | NEXT_VERSION |
| clearable | `boolean` | `false` | 是否支持清除 | |
| date-format | `string` | `undefined` | 选择面板内部日期输入框的日期格式 | NEXT_VERSION |
| default-value | `number \| [number, number] \| null` | `undefined` | 默认被选中的日期的时间戳 | |

7
src/date-picker/src/DatePicker.tsx
View File

@ -963,7 +963,12 @@ export default defineComponent({
onNextYear: this.onNextYear,
onPrevYear: this.onPrevYear,
timerPickerFormat: this.timerPickerFormat,
dateFormat: this.dateFormat
dateFormat: this.dateFormat,
calendarDayFormat: this.calendarDayFormat,
calendarHeaderYearFormat: this.calendarHeaderYearFormat,
calendarHeaderMonthFormat: this.calendarHeaderMonthFormat,
calendarHeaderMonthYearSeparator: this.calendarHeaderMonthYearSeparator,
calendarHeaderMonthBeforeYear: this.calendarHeaderMonthBeforeYear
}
const renderPanel = (): VNode => {
const { type } = this

3
src/date-picker/src/panel/date.tsx
View File

@ -75,7 +75,8 @@ export default defineComponent({
{resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
</div>
<PanelHeader
monthBeforeYear={this.locale.monthBeforeYear}
monthYearSeparator={this.calendarHeaderMonthYearSeparator}
monthBeforeYear={this.calendarMonthBeforeYear}
value={this.calendarValue}
onUpdateValue={this.onUpdateCalendarValue}
mergedClsPrefix={mergedClsPrefix}

6
src/date-picker/src/panel/daterange.tsx
View File

@ -66,7 +66,8 @@ export default defineComponent({
{resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
</div>
<PanelHeader
monthBeforeYear={this.locale.monthBeforeYear}
monthYearSeparator={this.calendarHeaderMonthYearSeparator}
monthBeforeYear={this.calendarMonthBeforeYear}
value={this.startCalendarDateTime}
onUpdateValue={this.onUpdateStartCalendarValue}
mergedClsPrefix={mergedClsPrefix}
@ -156,7 +157,8 @@ export default defineComponent({
{resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
</div>
<PanelHeader
monthBeforeYear={this.locale.monthBeforeYear}
monthYearSeparator={this.calendarHeaderMonthYearSeparator}
monthBeforeYear={this.calendarMonthBeforeYear}
value={this.endCalendarDateTime}
onUpdateValue={this.onUpdateEndCalendarValue}
mergedClsPrefix={mergedClsPrefix}

3
src/date-picker/src/panel/datetime.tsx
View File

@ -100,7 +100,8 @@ export default defineComponent({
{resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
</div>
<PanelHeader
monthBeforeYear={this.locale.monthBeforeYear}
monthYearSeparator={this.calendarHeaderMonthYearSeparator}
monthBeforeYear={this.calendarMonthBeforeYear}
value={this.calendarValue}
onUpdateValue={this.onUpdateCalendarValue}
mergedClsPrefix={mergedClsPrefix}

6
src/date-picker/src/panel/datetimerange.tsx
View File

@ -141,7 +141,8 @@ export default defineComponent({
{resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
</div>
<PanelHeader
monthBeforeYear={this.locale.monthBeforeYear}
monthYearSeparator={this.calendarHeaderMonthYearSeparator}
monthBeforeYear={this.calendarMonthBeforeYear}
value={this.startCalendarDateTime}
onUpdateValue={this.onUpdateStartCalendarValue}
mergedClsPrefix={mergedClsPrefix}
@ -241,10 +242,11 @@ export default defineComponent({
{resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
</div>
<PanelHeader
monthBeforeYear={this.locale.monthBeforeYear}
monthBeforeYear={this.calendarMonthBeforeYear}
value={this.endCalendarDateTime}
onUpdateValue={this.onUpdateEndCalendarValue}
mergedClsPrefix={mergedClsPrefix}
monthYearSeparator={this.calendarHeaderMonthYearSeparator}
calendarMonth={this.endCalendarMonth}
calendarYear={this.endCalendarYear}
/>

7
src/date-picker/src/panel/panelHeader.tsx
View File

@ -22,6 +22,10 @@ export default defineComponent({
type: Boolean,
required: true
},
monthYearSeparator: {
type: String,
required: true
},
calendarMonth: {
type: String,
required: true
@ -98,6 +102,9 @@ export default defineComponent({
ref="monthPanelRef"
onUpdateValue={this.onUpdateValue}
actions={[]}
calendarHeaderMonthYearSeparator={
this.monthYearSeparator
}
// month and year click show month type
type="month"
key="month"

15
src/date-picker/src/panel/use-calendar.ts
View File

@ -93,6 +93,9 @@ function useCalendar(
const mergedDateFormatRef = computed(
() => props.dateFormat || localeRef.value.dateFormat
)
const mergedDayFormatRef = computed(
() => props.calendarDayFormat || localeRef.value.dayFormat
)
const dateInputValueRef = ref(
props.value === null || Array.isArray(props.value)
? ''
@ -155,7 +158,7 @@ function useCalendar(
const { ts } = dateItem
return format(
ts,
localeRef.value.dayFormat,
mergedDayFormatRef.value,
panelCommon.dateFnsOptions.value
)
})
@ -163,17 +166,22 @@ function useCalendar(
const calendarMonthRef = computed(() => {
return format(
calendarValueRef.value,
localeRef.value.monthFormat,
props.calendarHeaderMonthFormat || localeRef.value.monthFormat,
panelCommon.dateFnsOptions.value
)
})
const calendarYearRef = computed(() => {
return format(
calendarValueRef.value,
localeRef.value.yearFormat,
props.calendarHeaderYearFormat || localeRef.value.yearFormat,
panelCommon.dateFnsOptions.value
)
})
const calendarMonthBeforeYearRef = computed(() => {
return (
props.calendarHeaderMonthBeforeYear ?? localeRef.value.monthBeforeYear
)
})
watch(calendarValueRef, (value, oldValue) => {
if (type === 'date' || type === 'datetime') {
if (!isSameMonth(value, oldValue)) {
@ -541,6 +549,7 @@ function useCalendar(
calendarYear: calendarYearRef,
calendarMonth: calendarMonthRef,
weekdays: weekdaysRef,
calendarMonthBeforeYear: calendarMonthBeforeYearRef,
mergedIsDateDisabled,
nextYear,
prevYear,

20
src/date-picker/src/panel/use-dual-calendar.ts
View File

@ -131,6 +131,10 @@ function useDualCalendar(
() => props.dateFormat || localeRef.value.dateFormat
)
const mergedDayFormatRef = computed(
() => props.calendarDayFormat || localeRef.value.dayFormat
)
const startDateInput = ref(
Array.isArray(value)
? format(
@ -177,7 +181,7 @@ function useDualCalendar(
const { ts } = dateItem
return format(
ts,
localeRef.value.dayFormat,
mergedDayFormatRef.value,
panelCommon.dateFnsOptions.value
)
})
@ -185,28 +189,28 @@ function useDualCalendar(
const startCalendarMonthRef = computed(() => {
return format(
startCalendarDateTimeRef.value,
localeRef.value.monthFormat,
props.calendarHeaderMonthFormat || localeRef.value.monthFormat,
panelCommon.dateFnsOptions.value
)
})
const endCalendarMonthRef = computed(() => {
return format(
endCalendarDateTimeRef.value,
localeRef.value.monthFormat,
props.calendarHeaderMonthFormat || localeRef.value.monthFormat,
panelCommon.dateFnsOptions.value
)
})
const startCalendarYearRef = computed(() => {
return format(
startCalendarDateTimeRef.value,
localeRef.value.yearFormat,
props.calendarHeaderYearFormat || localeRef.value.yearFormat,
panelCommon.dateFnsOptions.value
)
})
const endCalendarYearRef = computed(() => {
return format(
endCalendarDateTimeRef.value,
localeRef.value.yearFormat,
props.calendarHeaderYearFormat || localeRef.value.yearFormat,
panelCommon.dateFnsOptions.value
)
})
@ -270,6 +274,11 @@ function useDualCalendar(
monthFormat: monthFormatRef.value
})
})
const calendarMonthBeforeYearRef = computed(() => {
return (
props.calendarHeaderMonthBeforeYear ?? localeRef.value.monthBeforeYear
)
})
watch(
computed(() => props.value),
(value) => {
@ -892,6 +901,7 @@ function useDualCalendar(
mergedIsDateDisabled,
changeStartEndTime,
ranges: rangesRef,
calendarMonthBeforeYear: calendarMonthBeforeYearRef,
startCalendarMonth: startCalendarMonthRef,
startCalendarYear: startCalendarYearRef,
endCalendarMonth: endCalendarMonthRef,

8
src/date-picker/src/panel/use-panel-common.ts
View File

@ -22,6 +22,14 @@ const TIME_FORMAT = 'HH:mm:ss'
const usePanelCommonProps = {
active: Boolean,
dateFormat: String,
calendarDayFormat: String,
calendarHeaderYearFormat: String,
calendarHeaderMonthFormat: String,
calendarHeaderMonthYearSeparator: { type: String, required: true },
calendarHeaderMonthBeforeYear: {
type: Boolean,
default: undefined
},
timerPickerFormat: {
type: String,
value: TIME_FORMAT

11
src/date-picker/src/props.ts
View File

@ -30,6 +30,17 @@ export const datePickerProps = {
},
clearable: Boolean,
updateValueOnClose: Boolean,
calendarDayFormat: String,
calendarHeaderYearFormat: String,
calendarHeaderMonthFormat: String,
calendarHeaderMonthYearSeparator: {
type: String,
default: ' '
},
calendarHeaderMonthBeforeYear: {
type: Boolean,
default: undefined
},
defaultValue: [Number, Array] as PropType<Value | null>,
defaultFormattedValue: [String, Array] as PropType<FormattedValue | null>,
defaultTime: [Number, String, Array] as PropType<DefaultTime>,

1
volar.d.ts vendored
View File

@ -151,6 +151,7 @@ declare module 'vue' {
NVirtualList: (typeof import('naive-ui'))['NVirtualList']
NWatermark: (typeof import('naive-ui'))['NWatermark']
NHighlight: (typeof import('naive-ui'))['NHighlight']
NMarqueue: (typeof import('naive-ui'))['NMarqueue']
}
}
export {}