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

Jump to bottom

fix: 修复响应式问题 #1050

Merged
merged 1 commit into from
Jun 23, 2022
Merged

fix: 修复响应式问题 #1050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 6 additions & 1 deletion examples/date-picker/demos/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@
<t-radio-button value="time-stamp">time-stamp</t-radio-button>
</t-radio-group>

<t-date-picker v-model="date2" :value-type="valueType" />
<t-date-picker v-model="date2" :value-type="valueType" @change="handleChange" />
<t-date-picker
v-model="date"
placeholder="可清除、可输入的日期选择器"
:value-type="valueType"
clearable
allow-input
@change="handleChange"
/>
</div>
</template>
Expand All @@ -22,4 +23,8 @@ import { ref } from 'vue';
const date = ref('');
const date2 = ref('');
const valueType = ref('YYYY-MM-DD');

function handleChange(v) {
console.log(v);
}
</script>
46 changes: 24 additions & 22 deletions src/date-picker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,34 +32,36 @@ export default defineComponent({
onChange,
} = useSingle(props);

const { formatTime, formatDate, format } = useFormat({
mode: props.mode,
value: value.value,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
});
const formatRef = computed(() =>
useFormat({
mode: props.mode,
value: value.value,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
}),
);

watchEffect(() => {
if (!props.enableTimePicker) return;

// 面板展开重置数据
if (popupVisible.value) {
cacheValue.value = formatDate(value.value || new Date());
time.value = formatTime(value.value || new Date());
cacheValue.value = formatRef.value.formatDate(value.value || new Date());
time.value = formatRef.value.formatTime(value.value || new Date());
}
});

// 日期 hover
function onCellMouseEnter(date: Date) {
isHoverCell.value = true;
inputValue.value = formatDate(date);
inputValue.value = formatRef.value.formatDate(date);
}

// 日期 leave
function onCellMouseLeave() {
isHoverCell.value = false;
inputValue.value = formatDate(cacheValue.value);
inputValue.value = formatRef.value.formatDate(cacheValue.value);
}

// 日期点击
Expand All @@ -71,9 +73,9 @@ export default defineComponent({
month.value = date.getMonth();
}
if (props.enableTimePicker) {
cacheValue.value = formatDate(date);
cacheValue.value = formatRef.value.formatDate(date);
} else {
onChange?.(formatDate(date, { formatType: 'valueType' }) as DateValue, {
onChange?.(formatRef.value.formatDate(date, { formatType: 'valueType' }) as DateValue, {
dayjsValue: dayjs(date),
trigger: 'pick',
});
Expand Down Expand Up @@ -101,7 +103,7 @@ export default defineComponent({

const nextYear = next.getFullYear();
const nextMonth = next.getMonth();
const nextInputValue = formatDate(
const nextInputValue = formatRef.value.formatDate(
dayjs((inputValue.value as string) || new Date())
.year(nextYear)
.month(nextMonth)
Expand All @@ -123,33 +125,33 @@ export default defineComponent({
let nextHours = hours;
if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
const currentDate = !dayjs(inputValue.value as string, format).isValid()
const currentDate = !dayjs(inputValue.value as string, formatRef.value.format).isValid()
? dayjs()
: dayjs(inputValue.value as string, format);
: dayjs(inputValue.value as string, formatRef.value.format);
const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
inputValue.value = formatDate(nextDate);
inputValue.value = formatRef.value.formatDate(nextDate);

props.onPick?.(nextDate);
}

// 确定
function onConfirmClick() {
const nextValue = formatDate(inputValue.value);
const nextValue = formatRef.value.formatDate(inputValue.value);
if (nextValue) {
onChange?.(formatDate(inputValue.value, { formatType: 'valueType' }) as DateValue, {
onChange?.(formatRef.value.formatDate(inputValue.value, { formatType: 'valueType' }) as DateValue, {
dayjsValue: dayjs(inputValue.value as string),
trigger: 'confirm',
});
} else {
inputValue.value = formatDate(value.value);
inputValue.value = formatRef.value.formatDate(value.value);
}
popupVisible.value = false;
}

// 预设
function onPresetClick(presetValue: DateValue | (() => DateValue)) {
const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
onChange?.(formatDate(presetVal, { formatType: 'valueType' }) as DateValue, {
onChange?.(formatRef.value.formatDate(presetVal, { formatType: 'valueType' }) as DateValue, {
dayjsValue: dayjs(presetVal),
trigger: 'preset',
});
Expand All @@ -168,7 +170,7 @@ export default defineComponent({
value: cacheValue.value as string,
year: year.value,
month: month.value,
format,
format: formatRef.value.format,
mode: props.mode,
presets: props.presets,
time: time.value as string,
Expand Down
30 changes: 16 additions & 14 deletions src/date-picker/DatePickerPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,15 @@ export default defineComponent({
setup(props: TdDatePickerPanelProps) {
const { cacheValue, value, year, month, time, onChange } = useSingleValue(props);

const { formatDate, format } = useFormat({
value: value.value,
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
});
const formatRef = computed(() =>
useFormat({
value: value.value,
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
}),
);

// 日期点击
function onCellClick(date: Date, { e }: { e: MouseEvent }) {
Expand All @@ -38,9 +40,9 @@ export default defineComponent({
month.value = date.getMonth();
}
if (props.enableTimePicker) {
cacheValue.value = formatDate(date);
cacheValue.value = formatRef.value.formatDate(date);
} else {
onChange?.(formatDate(date, { formatType: 'valueType' }) as DateValue, {
onChange?.(formatRef.value.formatDate(date, { formatType: 'valueType' }) as DateValue, {
dayjsValue: dayjs(date),
trigger: 'pick',
});
Expand Down Expand Up @@ -99,11 +101,11 @@ export default defineComponent({
let nextHours = hours;
if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
const currentDate = !dayjs(cacheValue.value as string, format).isValid()
const currentDate = !dayjs(cacheValue.value as string, formatRef.value.format).isValid()
? dayjs()
: dayjs(cacheValue.value as string, format);
: dayjs(cacheValue.value as string, formatRef.value.format);
const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
cacheValue.value = formatDate(nextDate);
cacheValue.value = formatRef.value.formatDate(nextDate);

props.onTimeChange?.({
time: val,
Expand All @@ -114,7 +116,7 @@ export default defineComponent({

// 确定
function onConfirmClick({ e }: { e: MouseEvent }) {
onChange?.(formatDate(cacheValue.value, { formatType: 'valueType' }) as DateValue, {
onChange?.(formatRef.value.formatDate(cacheValue.value, { formatType: 'valueType' }) as DateValue, {
dayjsValue: dayjs(cacheValue.value as string),
trigger: 'confirm',
});
Expand All @@ -124,7 +126,7 @@ export default defineComponent({
// 预设
function onPresetClick(presetValue: DateValue | (() => DateValue), { e, preset }: any) {
const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
onChange?.(formatDate(presetVal, { formatType: 'valueType' }) as DateValue, {
onChange?.(formatRef.value.formatDate(presetVal, { formatType: 'valueType' }) as DateValue, {
dayjsValue: dayjs(presetVal),
trigger: 'preset',
});
Expand Down
50 changes: 27 additions & 23 deletions src/date-picker/DateRangePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,15 @@ export default defineComponent({
onChange,
} = useRange(props);

const { formatTime, formatDate, isValidDate, format, timeFormat } = useFormat({
mode: props.mode,
value: props.value,
enableTimePicker: props.enableTimePicker,
format: props.format,
valueType: props.valueType,
});
const formatRef = computed(() =>
useFormat({
mode: props.mode,
value: props.value,
enableTimePicker: props.enableTimePicker,
format: props.format,
valueType: props.valueType,
}),
);

// 记录面板是否选中过
const isSelected = ref(false);
Expand All @@ -49,8 +51,10 @@ export default defineComponent({
if (popupVisible.value) {
isSelected.value = false;
isFirstValueSelected.value = false;
cacheValue.value = formatDate(value.value || []) as string[];
time.value = formatTime(value.value || [dayjs().format(timeFormat), dayjs().format(timeFormat)]) as string[];
cacheValue.value = formatRef.value.formatDate(value.value || []) as string[];
time.value = formatRef.value.formatTime(
value.value || [dayjs().format(formatRef.value.timeFormat), dayjs().format(formatRef.value.timeFormat)],
) as string[];

// 确保右侧面板月份比左侧大 避免两侧面板月份一致
if (value.value.length === 2) {
Expand All @@ -67,7 +71,7 @@ export default defineComponent({
function onCellMouseEnter(date: Date) {
isHoverCell.value = true;
const nextValue = [...(inputValue.value as string[])];
nextValue[activeIndex.value] = formatDate(date) as string;
nextValue[activeIndex.value] = formatRef.value.formatDate(date) as string;
inputValue.value = nextValue;
}

Expand All @@ -85,7 +89,7 @@ export default defineComponent({
isSelected.value = true;

const nextValue = [...(inputValue.value as string[])];
nextValue[activeIndex.value] = formatDate(date) as string;
nextValue[activeIndex.value] = formatRef.value.formatDate(date) as string;
cacheValue.value = nextValue;
inputValue.value = nextValue;

Expand All @@ -105,11 +109,11 @@ export default defineComponent({
if (props.enableTimePicker) return;

// 确保两端都是有效值
const notValidIndex = nextValue.findIndex((v) => !v || !isValidDate(v));
const notValidIndex = nextValue.findIndex((v) => !v || !formatRef.value.isValidDate(v));

// 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
if (notValidIndex === -1 && nextValue.length === 2 && !props.enableTimePicker && isFirstValueSelected.value) {
onChange?.(formatDate(nextValue, { formatType: 'valueType' }) as DateValue[], {
onChange?.(formatRef.value.formatDate(nextValue, { formatType: 'valueType' }) as DateValue[], {
dayjsValue: nextValue.map((v) => dayjs(v)),
trigger: 'pick',
});
Expand Down Expand Up @@ -174,9 +178,9 @@ export default defineComponent({

const nextInputValue = [...(inputValue.value as DateValue[])];
const changedInputValue = inputValue.value[activeIndex.value];
const currentDate = !dayjs(changedInputValue, format).isValid()
const currentDate = !dayjs(changedInputValue, formatRef.value.format).isValid()
? dayjs().year(year.value[activeIndex.value]).month(month.value[activeIndex.value])
: dayjs(changedInputValue, format);
: dayjs(changedInputValue, formatRef.value.format);
// am pm 12小时制转化 24小时制
let nextHours = hours;
if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
Expand All @@ -190,24 +194,24 @@ export default defineComponent({
time.value = nextTime;

isSelected.value = true;
inputValue.value = formatDate(nextInputValue);
cacheValue.value = formatDate(nextInputValue);
inputValue.value = formatRef.value.formatDate(nextInputValue);
cacheValue.value = formatRef.value.formatDate(nextInputValue);
}

// 确定
function onConfirmClick() {
const nextValue = [...(inputValue.value as string[])];

const notValidIndex = nextValue.findIndex((v) => !v || !isValidDate(v));
const notValidIndex = nextValue.findIndex((v) => !v || !formatRef.value.isValidDate(v));

// 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
if (notValidIndex === -1 && nextValue.length === 2 && isFirstValueSelected.value) {
onChange?.(formatDate(nextValue, { formatType: 'valueType' }) as DateValue[], {
onChange?.(formatRef.value.formatDate(nextValue, { formatType: 'valueType' }) as DateValue[], {
dayjsValue: nextValue.map((v) => dayjs(v)),
trigger: 'confirm',
});
year.value = nextValue.map((v) => dayjs(v, format).year());
month.value = nextValue.map((v) => dayjs(v, format).month());
year.value = nextValue.map((v) => dayjs(v, formatRef.value.format).year());
month.value = nextValue.map((v) => dayjs(v, formatRef.value.format).month());
popupVisible.value = false;
isFirstValueSelected.value = false;
} else if (notValidIndex !== -1) {
Expand All @@ -228,7 +232,7 @@ export default defineComponent({
if (!Array.isArray(presetValue)) {
console.error(`preset: ${preset} 预设值必须是数组!`);
} else {
onChange?.(formatDate(presetValue, { formatType: 'valueType' }) as DateValue[], {
onChange?.(formatRef.value.formatDate(presetValue, { formatType: 'valueType' }) as DateValue[], {
dayjsValue: presetValue.map((p) => dayjs(p)),
trigger: 'preset',
});
Expand Down Expand Up @@ -271,7 +275,7 @@ export default defineComponent({
activeIndex: activeIndex.value,
year: year.value,
month: month.value,
format,
format: formatRef.value.format,
mode: props.mode,
presets: props.presets,
time: time.value,
Expand Down
Loading