Skip to content

Commit

Permalink
feat: support valueType
Browse files Browse the repository at this point in the history
  • Loading branch information
@honkinglin
honkinglin committed Sep 29, 2022
1 parent f4ab273 commit 95de091
Show file tree
Hide file tree
Showing 10 changed files with 91 additions and 11 deletions.
2 changes: 1 addition & 1 deletion src/_common
Submodule _common updated 1 files
+34 −10 js/date-picker/format.ts
4 changes: 4 additions & 0 deletions src/date-picker/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export default defineComponent({
const formatRef = computed(() => getDefaultFormat({
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
}));

Expand Down Expand Up @@ -93,6 +94,7 @@ export default defineComponent({
onChange?.(
formatDate(date, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue,
{
dayjsValue: parseToDayjs(date, formatRef.value.format),
Expand Down Expand Up @@ -168,6 +170,7 @@ export default defineComponent({
onChange?.(
formatDate(inputValue.value, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue,
{
dayjsValue: parseToDayjs(inputValue.value as string, formatRef.value.format),
Expand All @@ -188,6 +191,7 @@ export default defineComponent({
onChange?.(
formatDate(presetVal, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue,
{
dayjsValue: parseToDayjs(presetVal, formatRef.value.format),
Expand Down
4 changes: 4 additions & 0 deletions src/date-picker/DateRangePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default defineComponent({
mode: props.mode,
enableTimePicker: props.enableTimePicker,
format: props.format,
valueType: props.valueType,
}));

// 记录面板是否选中过
Expand Down Expand Up @@ -163,6 +164,7 @@ export default defineComponent({
onChange?.(
formatDate(nextValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue[],
{
dayjsValue: nextValue.map((v) => parseToDayjs(v, formatRef.value.format)),
Expand Down Expand Up @@ -286,6 +288,7 @@ export default defineComponent({
onChange?.(
formatDate(nextValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue[],
{
dayjsValue: nextValue.map((v) => parseToDayjs(v, formatRef.value.format)),
Expand Down Expand Up @@ -318,6 +321,7 @@ export default defineComponent({
onChange?.(
formatDate(presetValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue[],
{
dayjsValue: presetValue.map((p) => parseToDayjs(p, formatRef.value.format)),
Expand Down
2 changes: 2 additions & 0 deletions src/date-picker/date-picker.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API
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
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 Down Expand Up @@ -65,6 +66,7 @@ timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API
tips | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
value | Array | [] | `v-model` is supported。Typescript：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
defaultValue | Array | [] | uncontrolled property。Typescript：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[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
onBlur | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/> | N
onChange | Function | | Typescript：`(value: DateRangeValue, 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/> | N
onFocus | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/> | N
Expand Down
6 changes: 4 additions & 2 deletions src/date-picker/date-picker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B']
disabled | Boolean | - | 是否禁用组件 | N
enableTimePicker | Boolean | false | 是否显示时间选择 | N
firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
format | String | undefined | 用于格式化日期，全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) | N
format | String | undefined | 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) | N
inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
placeholder | String / Array | undefined | 占位符。TS 类型：`string` | N
Expand All @@ -25,6 +25,7 @@ timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`Tim
tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
value | String / Number / Array / Date | '' | 选中值。支持语法糖 `v-model`。TS 类型：`DateValue` `type DateValue = string | number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string | number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。可选项：'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
onBlur | Function | | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发 | N
onChange | Function | | TS 类型：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。[详细类型定义](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 | | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`<br/>输入框获得焦点时触发 | N
Expand All @@ -46,7 +47,7 @@ pick | `(value: DateValue)` | 面板选中值后触发
allowInput | Boolean | false | 是否允许输入日期 | N
clearable | Boolean | false | 是否显示清楚按钮 | N
disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`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'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
disabled | Boolean | - | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用 | N
disabled | Boolean | - | 是否禁用组件 | N
enableTimePicker | Boolean | false | 是否显示时间选择 | N
firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
format | String | - | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N
Expand All @@ -65,6 +66,7 @@ timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`Tim
tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
value | Array | [] | 选中值。支持语法糖 `v-model`。TS 类型：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。可选项：'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
onBlur | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发 | N
onChange | Function | | TS 类型：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/> | N
onFocus | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/>输入框获得焦点时触发 | N
Expand Down
20 changes: 19 additions & 1 deletion src/date-picker/date-range-picker-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default {
disableDate: {
type: [Object, Array, Function] as PropType<TdDateRangePickerProps['disableDate']>,
},
/** 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用 */
/** 是否禁用组件 */
disabled: Boolean,
/** 是否显示时间选择 */
enableTimePicker: Boolean,
Expand Down Expand Up @@ -111,6 +111,24 @@ export default {
type: Array as PropType<TdDateRangePickerProps['defaultValue']>,
default: (): TdDateRangePickerProps['defaultValue'] => [],
},
/** 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式 */
valueType: {
type: String as PropType<TdDateRangePickerProps['valueType']>,
validator(val: TdDateRangePickerProps['valueType']): boolean {
if (!val) return true;
return [
'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',
].includes(val);
},
},
/** 当输入框失去焦点时触发 */
onBlur: Function as PropType<TdDateRangePickerProps['onBlur']>,
/** 选中值发生变化时触发 */
Expand Down
2 changes: 2 additions & 0 deletions src/date-picker/hooks/useRange.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) {
const formatRef = computed(() => getDefaultFormat({
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
}));

Expand Down Expand Up @@ -88,6 +89,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) {
onChange?.(
formatDate(newVal, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue[],
{
dayjsValue: newVal.map((v) => parseToDayjs(v, formatRef.value.format)),
Expand Down
12 changes: 8 additions & 4 deletions src/date-picker/hooks/useSingle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function useSingle(props: TdDatePickerProps, { emit }: any) {
const formatRef = computed(() => getDefaultFormat({
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
}));

Expand Down Expand Up @@ -82,10 +83,13 @@ export default function useSingle(props: TdDatePickerProps, { emit }: any) {

popupVisible.value = false;
if (isValidDate(val, formatRef.value.format)) {
onChange?.(formatDate(val, { format: formatRef.value.format }) as DateValue, {
dayjsValue: parseToDayjs(val, formatRef.value.format),
trigger: 'enter',
});
onChange?.(
formatDate(val, { format: formatRef.value.format, targetFormat: formatRef.value.valueType }) as DateValue,
{
dayjsValue: parseToDayjs(val, formatRef.value.format),
trigger: 'enter',
},
);
} else if (isValidDate(value.value, formatRef.value.format)) {
inputValue.value = formatDate(value.value, {
format: formatRef.value.format,
Expand Down
20 changes: 19 additions & 1 deletion src/date-picker/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default {
return [1, 2, 3, 4, 5, 6, 7].includes(val);
},
},
/** 用于格式化日期，全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) */
/** 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) */
format: {
type: String,
default: undefined,
Expand Down Expand Up @@ -102,6 +102,24 @@ export default {
type: [String, Number, Array, Date] as PropType<TdDatePickerProps['defaultValue']>,
default: '',
},
/** 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式 */
valueType: {
type: String as PropType<TdDatePickerProps['valueType']>,
validator(val: TdDatePickerProps['valueType']): boolean {
if (!val) return true;
return [
'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',
].includes(val);
},
},
/** 当输入框失去焦点时触发 */
onBlur: Function as PropType<TdDatePickerProps['onBlur']>,
/** 选中值发生变化时触发 */
Expand Down
30 changes: 28 additions & 2 deletions src/date-picker/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export interface TdDatePickerProps {
*/
firstDayOfWeek?: number;
/**
* 用于格式化日期，全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format)
* 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format)
*/
format?: string;
/**
Expand Down Expand Up @@ -99,6 +99,19 @@ export interface TdDatePickerProps {
* @default ''
*/
defaultValue?: DateValue;
/**
* 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式
*/
valueType?:
| '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';
/**
* 当输入框失去焦点时触发
*/
Expand Down Expand Up @@ -133,7 +146,7 @@ export interface TdDateRangePickerProps {
*/
disableDate?: DisableRangeDate;
/**
* 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用
* 是否禁用组件
*/
disabled?: boolean;
/**
Expand Down Expand Up @@ -216,6 +229,19 @@ export interface TdDateRangePickerProps {
* @default []
*/
defaultValue?: DateRangeValue;
/**
* 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式
*/
valueType?:
| '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';
/**
* 当输入框失去焦点时触发
*/
Expand Down

0 comments on commit 95de091

Please sign in to comment.