feat(date-picker): fix code

This commit is contained in:
马泽坤 2021-07-23 15:43:50 +08:00
parent 6d1c4f97d1
commit 2b0e637425
7 changed files with 17 additions and 15 deletions

View File

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

View File

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

View File

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

View File

@ -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` | 关闭面板时是否更新值 |

View File

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

View File

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

View File

@ -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()
}
}
}
}