mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
feat(date-picker): fix code
This commit is contained in:
parent
6d1c4f97d1
commit
2b0e637425
@ -9,7 +9,7 @@
|
||||
- `n-checkbox-group` add `min` and `max` prop.
|
||||
- `n-mention` add `empty` slot.
|
||||
- `n-space` `justify` prop supports `center`, `space-around` and `space-between`.
|
||||
- `n-date-picker` add `close-on-selected` prop, closes [#541](https://github.com/TuSimple/naive-ui/issues/541).
|
||||
- `n-date-picker` add `close-on-select` prop, closes [#541](https://github.com/TuSimple/naive-ui/issues/541).
|
||||
|
||||
### Fixes
|
||||
|
||||
|
@ -9,7 +9,7 @@
|
||||
- `n-checkbox-group` 新增 `min` 和 `max` 属性
|
||||
- `n-mention` 新增 `empty` slot
|
||||
- `n-space` `justify` 属性支持 `center`、`space-around` 和 `space-between`
|
||||
- `n-date-picker` 新增 `close-on-selected` 属性, 关闭 [#541](https://github.com/TuSimple/naive-ui/issues/541)
|
||||
- `n-date-picker` 新增 `close-on-select` 属性, 关闭 [#541](https://github.com/TuSimple/naive-ui/issues/541)
|
||||
|
||||
### Fixes
|
||||
|
||||
|
@ -67,7 +67,7 @@ update-on-close
|
||||
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | Validator of the date. |
|
||||
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | Validator of the time. |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | Customize ranges. |
|
||||
| close-on-selected | `boolean` | `false` | Whether to close the panel after the user selected a time range. |
|
||||
| close-on-select | `boolean` | `false` | Whether to close the panel after the user selected a time range. |
|
||||
| separator | `string` | `'to'` | The separator between the start input and the end input. |
|
||||
| start-placeholder | `string` | `'Start Date'` | The prompt information of the start input. |
|
||||
| update-value-on-close | `boolean` | `false` | Whether to update value on close. |
|
||||
@ -83,7 +83,6 @@ update-on-close
|
||||
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | Validator of the date. |
|
||||
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | Validator of the time. |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | Customize ranges. |
|
||||
| close-on-selected | `boolean` | `false` | Whether to close the panel after the user selected a time range. |
|
||||
| separator | `string` | `'to'` | The separator between the start input and the end input. |
|
||||
| start-placeholder | `string` | `'Start Date and Time'` | The prompt information of the start input. |
|
||||
| update-value-on-close | `boolean` | `false` | Whether to update value on close. |
|
||||
|
@ -67,7 +67,7 @@ update-on-close
|
||||
| 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] \| null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | 时间禁用的校验函数 |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | 用户自定义的快捷选择范围 |
|
||||
| close-on-selected | `boolean` | `false` | 用户选择时间范围后是否自动关闭面板 |
|
||||
| close-on-select | `boolean` | `false` | 用户选择时间范围后是否自动关闭面板 |
|
||||
| separator | `string` | `'至'` | start 选框与 end 选框之间的分隔符 |
|
||||
| start-placeholder | `string` | `'开始日期'` | DateRange 中 start 选框的提示信息 |
|
||||
| update-value-on-close | `boolean` | `false` | 关闭面板时是否更新值 |
|
||||
@ -83,7 +83,6 @@ update-on-close
|
||||
| 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?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | 时间禁用的校验函数 |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | 用户自定义 DateTimeRange 范围 |
|
||||
| close-on-selected | `boolean` | `false` | 用户选择时间范围后是否自动关闭面板 |
|
||||
| separator | `string` | `'to'` | start 选框与 end 选框之间的分隔符 |
|
||||
| start-placeholder | `string` | `'开始日期时间'` | DateTimeRange 中 start 选框的提示信息 |
|
||||
| update-value-on-close | `boolean` | `false` | 关闭面板时是否更新值 |
|
||||
|
@ -107,10 +107,7 @@ const datePickerProps = {
|
||||
default: undefined
|
||||
},
|
||||
ranges: Object as PropType<Record<string, [number, number]>>,
|
||||
closeOnSelected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
closeOnSelect: Boolean,
|
||||
'onUpdate:show': [Function, Array] as PropType<
|
||||
MaybeArray<(show: boolean) => void>
|
||||
>,
|
||||
@ -498,7 +495,8 @@ export default defineComponent({
|
||||
dateLocaleRef,
|
||||
isDateDisabledRef: toRef(props, 'isDateDisabled'),
|
||||
rangesRef: toRef(props, 'ranges'),
|
||||
closeOnSelectedRef: toRef(props, 'closeOnSelected'),
|
||||
closeOnSelectRef: toRef(props, 'closeOnSelect'),
|
||||
updateValueOnCloseRef: toRef(props, 'updateValueOnClose'),
|
||||
...uniVaidation,
|
||||
...dualValidation,
|
||||
datePickerSlots: slots
|
||||
|
@ -47,7 +47,8 @@ export type DatePickerInjection = {
|
||||
dateLocaleRef: Ref<NDateLocale>
|
||||
isDateDisabledRef: Ref<IsDateDisabled | undefined>
|
||||
rangesRef: Ref<Record<string, [number, number]> | undefined>
|
||||
closeOnSelectedRef: Ref<boolean>
|
||||
closeOnSelectRef: Ref<boolean>
|
||||
updateValueOnCloseRef: Ref<boolean>
|
||||
datePickerSlots: Slots
|
||||
} & ReturnType<typeof uniCalendarValidation> &
|
||||
ReturnType<typeof dualCalendarValidation>
|
||||
|
@ -47,7 +47,8 @@ function useDualCalendar (
|
||||
isRangeInvalidRef,
|
||||
localeRef,
|
||||
rangesRef,
|
||||
closeOnSelectedRef,
|
||||
closeOnSelectRef,
|
||||
updateValueOnCloseRef,
|
||||
datePickerSlots
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
} = inject(datePickerInjectionKey)!
|
||||
@ -313,8 +314,12 @@ function useDualCalendar (
|
||||
changeStartEndTime(dateItem.ts)
|
||||
} else {
|
||||
isSelectingRef.value = false
|
||||
if (closeOnSelectedRef.value) {
|
||||
handleConfirmClick()
|
||||
if (closeOnSelectRef.value && type === 'daterange') {
|
||||
if (updateValueOnCloseRef.value) {
|
||||
closeCalendar()
|
||||
} else {
|
||||
handleConfirmClick()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user