Skip to content

Commit

Permalink
feat: 移除 valueType api
Browse files Browse the repository at this point in the history
  • Loading branch information
honkinglin committed Sep 14, 2022
1 parent 763f8f5 commit 1b757c8
Show file tree
Hide file tree
Showing 18 changed files with 103 additions and 257 deletions.
2 changes: 1 addition & 1 deletion src/_common
17 changes: 3 additions & 14 deletions src/date-picker/DatePicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ export default defineComponent({
getDefaultFormat({
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
}),
);
Expand All @@ -57,7 +56,6 @@ export default defineComponent({
if (value.value) {
cacheValue.value = formatDate(value.value, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
});
}
}
Expand All @@ -68,7 +66,6 @@ export default defineComponent({
isHoverCell.value = true;
inputValue.value = formatDate(date, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
});
}

Expand All @@ -77,7 +74,6 @@ export default defineComponent({
isHoverCell.value = false;
inputValue.value = formatDate(cacheValue.value, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
});
}

Expand All @@ -92,16 +88,14 @@ export default defineComponent({
if (props.enableTimePicker) {
cacheValue.value = formatDate(date, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
});
} else {
onChange?.(
formatDate(date, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue,
{
dayjsValue: dayjs(date),
dayjsValue: parseToDayjs(date, formatRef.value.format),
trigger: 'pick',
},
);
Expand Down Expand Up @@ -150,7 +144,6 @@ export default defineComponent({
const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
inputValue.value = formatDate(nextDate, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
});

props.onPick?.(nextDate);
Expand All @@ -160,23 +153,20 @@ export default defineComponent({
function onConfirmClick() {
const nextValue = formatDate(inputValue.value, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
});
if (nextValue) {
onChange?.(
formatDate(inputValue.value, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue,
{
dayjsValue: dayjs(inputValue.value as string),
dayjsValue: parseToDayjs(inputValue.value as string, formatRef.value.format),
trigger: 'confirm',
},
);
} else {
inputValue.value = formatDate(value.value, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
});
}
popupVisible.value = false;
Expand All @@ -188,10 +178,9 @@ export default defineComponent({
onChange?.(
formatDate(presetVal, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue,
{
dayjsValue: dayjs(presetVal),
dayjsValue: parseToDayjs(presetVal, formatRef.value.format),
trigger: 'preset',
},
);
Expand Down
33 changes: 12 additions & 21 deletions src/date-picker/DatePickerPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { defineComponent, computed } from 'vue';
import dayjs from 'dayjs';

import useSingleValue from './hooks/useSingleValue';
import { formatDate, getDefaultFormat } from '../_common/js/date-picker/format';
import { formatDate, getDefaultFormat, parseToDayjs } from '../_common/js/date-picker/format';
import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils';
import type {
DateValue,
Expand All @@ -23,7 +23,6 @@ export default defineComponent({
value: datePickerProps.value,
defaultValue: datePickerProps.defaultValue,
modelValue: datePickerProps.modelValue,
valueType: datePickerProps.valueType,
disabled: datePickerProps.disabled,
disableDate: datePickerProps.disableDate,
enableTimePicker: datePickerProps.enableTimePicker,
Expand All @@ -43,7 +42,6 @@ export default defineComponent({
getDefaultFormat({
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
}),
);
Expand All @@ -58,15 +56,12 @@ export default defineComponent({
month.value = date.getMonth();
}
if (props.enableTimePicker) {
cacheValue.value = formatDate(date, { format: formatRef.value.format, targetFormat: formatRef.value.format });
cacheValue.value = formatDate(date, { format: formatRef.value.format });
} else {
onChange?.(
formatDate(date, { format: formatRef.value.format, targetFormat: formatRef.value.valueType }) as DateValue,
{
dayjsValue: dayjs(date),
trigger: 'pick',
},
);
onChange?.(formatDate(date, { format: formatRef.value.format }) as DateValue, {
dayjsValue: parseToDayjs(date, formatRef.value.format),
trigger: 'pick',
});
}
}

Expand Down Expand Up @@ -126,7 +121,7 @@ export default defineComponent({
? dayjs()
: dayjs(cacheValue.value as string, formatRef.value.format);
const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
cacheValue.value = formatDate(nextDate, { format: formatRef.value.format, targetFormat: formatRef.value.format });
cacheValue.value = formatDate(nextDate, { format: formatRef.value.format });

props.onTimeChange?.({
time: val,
Expand All @@ -140,10 +135,9 @@ export default defineComponent({
onChange?.(
formatDate(cacheValue.value, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue,
{
dayjsValue: dayjs(cacheValue.value as string),
dayjsValue: parseToDayjs(cacheValue.value as string, formatRef.value.format),
trigger: 'confirm',
},
);
Expand All @@ -153,13 +147,10 @@ export default defineComponent({
// 预设
function onPresetClick(presetValue: DateValue | (() => DateValue), { e, preset }: any) {
const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
onChange?.(
formatDate(presetVal, { format: formatRef.value.format, targetFormat: formatRef.value.valueType }) as DateValue,
{
dayjsValue: dayjs(presetVal),
trigger: 'preset',
},
);
onChange?.(formatDate(presetVal, { format: formatRef.value.format }) as DateValue, {
dayjsValue: parseToDayjs(presetVal, formatRef.value.format),
trigger: 'preset',
});
props.onPresetClick?.({ e, preset });
}

Expand Down
16 changes: 3 additions & 13 deletions src/date-picker/DateRangePicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export default defineComponent({
mode: props.mode,
enableTimePicker: props.enableTimePicker,
format: props.format,
valueType: props.valueType,
}),
);

Expand All @@ -59,7 +58,6 @@ export default defineComponent({
isSelected.value = false;
cacheValue.value = formatDate(value.value || [], {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
}) as string[];
time.value = formatTime(
value.value || [dayjs().format(formatRef.value.timeFormat), dayjs().format(formatRef.value.timeFormat)],
Expand Down Expand Up @@ -93,7 +91,6 @@ export default defineComponent({
isFirstValueSelected.value = false;
inputValue.value = formatDate(value.value, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
});
}
});
Expand All @@ -104,7 +101,6 @@ export default defineComponent({
const nextValue = [...(inputValue.value as string[])];
nextValue[activeIndex.value] = formatDate(date, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
}) as string;
inputValue.value = nextValue;
}
Expand All @@ -125,7 +121,6 @@ export default defineComponent({
const nextValue = [...(inputValue.value as string[])];
nextValue[activeIndex.value] = formatDate(date, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
}) as string;
cacheValue.value = nextValue;
inputValue.value = nextValue;
Expand Down Expand Up @@ -153,10 +148,9 @@ export default defineComponent({
onChange?.(
formatDate(nextValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue[],
{
dayjsValue: nextValue.map((v) => dayjs(v)),
dayjsValue: nextValue.map((v) => parseToDayjs(v, formatRef.value.format)),
trigger: 'pick',
},
);
Expand Down Expand Up @@ -241,11 +235,9 @@ export default defineComponent({
isSelected.value = true;
inputValue.value = formatDate(nextInputValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
});
cacheValue.value = formatDate(nextInputValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
});
}

Expand All @@ -260,10 +252,9 @@ export default defineComponent({
onChange?.(
formatDate(nextValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue[],
{
dayjsValue: nextValue.map((v) => dayjs(v)),
dayjsValue: nextValue.map((v) => parseToDayjs(v, formatRef.value.format)),
trigger: 'confirm',
},
);
Expand Down Expand Up @@ -294,10 +285,9 @@ export default defineComponent({
onChange?.(
formatDate(presetValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue[],
{
dayjsValue: presetValue.map((p) => dayjs(p)),
dayjsValue: presetValue.map((p) => parseToDayjs(p, formatRef.value.format)),
trigger: 'preset',
},
);
Expand Down
18 changes: 5 additions & 13 deletions src/date-picker/DateRangePickerPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {

import TRangePanel from './panel/RangePanel';
import useRangeValue from './hooks/useRangeValue';
import { formatDate, getDefaultFormat } from '../_common/js/date-picker/format';
import { formatDate, getDefaultFormat, parseToDayjs } from '../_common/js/date-picker/format';
import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils';

export default defineComponent({
Expand All @@ -23,7 +23,6 @@ export default defineComponent({
value: dateRangePickerProps.value,
defaultValue: dateRangePickerProps.defaultValue,
modelValue: dateRangePickerProps.modelValue,
valueType: dateRangePickerProps.valueType,
disabled: dateRangePickerProps.disabled,
disableDate: dateRangePickerProps.disableDate,
enableTimePicker: dateRangePickerProps.enableTimePicker,
Expand All @@ -45,7 +44,6 @@ export default defineComponent({
mode: props.mode,
enableTimePicker: props.enableTimePicker,
format: props.format,
valueType: props.valueType,
}),
);

Expand All @@ -61,7 +59,6 @@ export default defineComponent({
const nextValue = [...(hoverValue.value as string[])];
nextValue[activeIndex.value] = formatDate(date, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
}) as string;
hoverValue.value = nextValue;
}
Expand All @@ -86,7 +83,6 @@ export default defineComponent({
const nextValue = [...(cacheValue.value as string[])];
nextValue[activeIndex.value] = formatDate(date, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
}) as string;
cacheValue.value = nextValue;

Expand All @@ -98,10 +94,9 @@ export default defineComponent({
onChange?.(
formatDate(nextValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue[],
{
dayjsValue: nextValue.map((v) => dayjs(v)),
dayjsValue: nextValue.map((v) => parseToDayjs(v, formatRef.value.format)),
trigger: 'pick',
},
);
Expand Down Expand Up @@ -200,12 +195,11 @@ export default defineComponent({
isSelected.value = true;
cacheValue.value = formatDate(nextInputValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.format,
});

props.onTimeChange?.({
time: val,
date: value.value.map((v) => dayjs(v).toDate()),
date: value.value.map((v) => parseToDayjs(v, formatRef.value.format).toDate()),
partial: activeIndex.value ? 'end' : 'start',
trigger: 'time-hour',
});
Expand All @@ -220,10 +214,9 @@ export default defineComponent({
onChange?.(
formatDate(nextValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue[],
{
dayjsValue: nextValue.map((v) => dayjs(v)),
dayjsValue: nextValue.map((v) => parseToDayjs(v, formatRef.value.format)),
trigger: 'confirm',
},
);
Expand All @@ -249,10 +242,9 @@ export default defineComponent({
onChange?.(
formatDate(presetValue, {
format: formatRef.value.format,
targetFormat: formatRef.value.valueType,
}) as DateValue[],
{
dayjsValue: presetValue.map((p) => dayjs(p)),
dayjsValue: presetValue.map((p) => parseToDayjs(p, formatRef.value.format)),
trigger: 'preset',
},
);
Expand Down
16 changes: 5 additions & 11 deletions src/date-picker/_example/base.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
<template>
<t-space direction="vertical">
<h3>valueType:</h3>
<t-radio-group v-model="valueType" variant="default-filled">
<t-radio-button value="YYYY-MM-DD">YYYY-MM-DD</t-radio-button>
<t-radio-button value="time-stamp">time-stamp</t-radio-button>
</t-radio-group>

<t-date-picker v-model="date2" :value-type="valueType" @change="handleChange" />
<t-date-picker v-model="date2" @change="handleChange" />
<t-date-picker
v-model="date"
placeholder="可清除、可输入的日期选择器"
:value-type="valueType"
clearable
allow-input
@change="handleChange"
Expand All @@ -23,9 +16,10 @@ import { ref } from 'vue';
const date = ref('');
const date2 = ref('');
const valueType = ref('YYYY-MM-DD');
function handleChange(v) {
console.log(v);
function handleChange(value, context) {
console.log('onChange:', value, context);
console.log('timestamp:', context.dayjsValue.valueOf());
console.log('YYYYMMDD:', context.dayjsValue.format('YYYYMMDD'));
}
</script>
Loading

0 comments on commit 1b757c8

Please sign in to comment.