Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: datepicker 支持defaultTime #2215

Merged
merged 4 commits into from
Mar 8, 2023
Merged

feat: datepicker 支持defaultTime #2215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
430a81d
feat: datepicker 支持defaultTime
honkinglin Mar 7, 2023
25ede18
feat: datepicker 支持defaultTime
honkinglin Mar 7, 2023
346ee85
feat: datepicker 支持defaultTime
honkinglin Mar 7, 2023
e7a4d77
feat(datepicker): 支持 defaultTime
honkinglin Mar 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 9 files
+4 −3 js/date-picker/format.ts
+4 −4 style/mobile/components/loading/_var.less
+1 −1 style/mobile/components/message/_var.less
+1 −1 style/mobile/components/slider/_var.less
+1 −1 style/mobile/components/steps/_index.less
+2 −2 style/mobile/components/steps/_mixin.less
+1 −1 style/mobile/components/switch/_var.less
+1 −1 style/web/components/guide/_index.less
+1 −1 style/web/components/image-viewer/_index.less
2 changes: 1 addition & 1 deletion src/date-picker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default defineComponent({
if (visible) {
year.value = parseToDayjs(value.value, formatRef.value.format).year();
month.value = parseToDayjs(value.value, formatRef.value.format).month();
time.value = formatTime(value.value, formatRef.value.timeFormat);
time.value = formatTime(value.value, formatRef.value.timeFormat, props.defaultTime);
} else {
isHoverCell.value = false;
}
Expand Down
1 change: 1 addition & 0 deletions src/date-picker/DateRangePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export default defineComponent({
time.value = formatTime(
value.value || [dayjs().format(formatRef.value.timeFormat), dayjs().format(formatRef.value.timeFormat)],
formatRef.value.timeFormat,
props.defaultTime,
) as string[];

// 空数据重置为当前年月
Expand Down
5 changes: 5 additions & 0 deletions src/date-picker/date-picker-panel-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ import { TdDatePickerPanelProps } from '../date-picker/type';
import { PropType } from 'vue';

export default {
/** 时间选择器默认值，当 value/defaultValue 未设置值时有效 */
defaultTime: {
type: String,
default: '00:00:00',
},
/** 点击日期单元格时触发 */
onCellClick: Function as PropType<TdDatePickerPanelProps['onCellClick']>,
/** 选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同 */
Expand Down
42 changes: 31 additions & 11 deletions src/date-picker/date-picker.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ name | type | default | description | required
-- | -- | -- | -- | --
allowInput | Boolean | false | \- | N
clearable | Boolean | false | \- | N
defaultTime | String | '00:00:00' | Time selector default value | N
disableDate | Object / Array / Function | - | Typescript：`DisableDate` `type DisableDate = Array<DateValue> \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
disabled | Boolean | - | make DatePicker to be disabled | N
enableTimePicker | Boolean | false | \- | N
Expand All @@ -19,13 +20,13 @@ popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./po
prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
presets | Object | - | Typescript：`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
presetsPlacement | String | bottom | options：left/top/right/bottom | N
status | String | - | options：default/success/warning/error | N
status | String | default | options：default/success/warning/error | N
suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
value | String / Number / Array / Date | '' | `v-model` is supported。Typescript：`DateValue` `type DateValue = string \| number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
defaultValue | String / Number / Array / Date | '' | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
valueType | String | - | options：'time-stamp' | 'Date' | 'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss:SSS' | N
valueType | String | - | Typescript：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
onBlur | Function | | Typescript：`(context: { value: DateValue; e: FocusEvent }) => void`<br/> | N
onChange | Function | | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/><br/>`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`<br/> | N
onFocus | Function | | Typescript：`(context: { value: DateValue; e: FocusEvent }) => void`<br/> | N
Expand All @@ -46,6 +47,7 @@ name | type | default | description | required
-- | -- | -- | -- | --
allowInput | Boolean | false | \- | N
clearable | Boolean | false | \- | N
defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N
disableDate | Object / Array / Function | - | Typescript：`DisableRangeDate` `type DisableRangeDate = Array<DateValue> \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
disabled | Boolean | - | \- | N
enableTimePicker | Boolean | false | \- | N
Expand All @@ -60,7 +62,7 @@ presets | Object | - | Typescript：`PresetRange` `interface PresetRange { [rang
presetsPlacement | String | bottom | options：left/top/right/bottom | N
rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
separator | String | - | \- | N
status | String | - | options：default/success/warning/error | N
status | String | default | options：default/success/warning/error | N
suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
Expand All @@ -83,6 +85,20 @@ focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e:
input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | \-
pick | `(value: DateValue, context: PickContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/>

### DatePickerPanel Props

name | type | default | description | required
-- | -- | -- | -- | --
defaultTime | String | '00:00:00' | Time selector default value | N
`Pick<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` | \- | - | extends `Pick<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` | N
onCellClick | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`<br/> | N
onChange | Function | | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`<br/> | N
onConfirm | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`<br/> | N
onMonthChange | Function | | Typescript：`(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`<br/> | N
onPanelClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onPresetClick | Function | | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/> | N
onTimeChange | Function | | Typescript：`(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`<br/> | N
onYearChange | Function | | Typescript：`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`<br/> | N

### DatePickerPanel Events

Expand All @@ -96,12 +112,21 @@ panel-click | `(context: { e: MouseEvent })` | \-
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \-
time-change | `(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`<br/>
year-change | `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`<br/>
### DatePickerPanel Props

### DateRangePickerPanel Props

name | type | default | description | required
-- | -- | -- | -- | --
`Pick<DatePickerProps, 'value' \| 'defaultValue' \| 'disabled' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` | \- | - | \- | N

defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N
`Pick<DateRangePickerProps, 'value'\| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'panelPreselection' \| 'timePickerProps'>` | \- | - | extends `Pick<DateRangePickerProps, 'value'\| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'panelPreselection' \| 'timePickerProps'>` | N
onCellClick | Function | | Typescript：`(context: { date: Date[], partial: DateRangePickerPartial, e: MouseEvent }) => void`<br/> | N
onChange | Function | | Typescript：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], partial: DateRangePickerPartial, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`<br/> | N
onConfirm | Function | | Typescript：`(context: { date: Date[], e: MouseEvent }) => void`<br/> | N
onMonthChange | Function | | Typescript：`(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`<br/> | N
onPanelClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onPresetClick | Function | | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/> | N
onTimeChange | Function | | Typescript：`(context: { time: string, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent }) => void`<br/> | N
onYearChange | Function | | Typescript：`(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`<br/> | N

### DateRangePickerPanel Events

Expand All @@ -115,8 +140,3 @@ panel-click | `(context: { e: MouseEvent })` | \-
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \-
time-change | `(context: { time: string, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent })` | \-
year-change | `(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | \-
### DateRangePickerPanel Props

name | type | default | description | required
-- | -- | -- | -- | --
`Pick<DateRangePickerProps, 'value'\| 'defaultValue' \| 'disabled' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'panelPreselection' \| 'timePickerProps'>` | \- | - | \- | N
Loading