Skip to content

Commit

Permalink
fix(date-picker): repair the issue of default values not being displa…
Browse files Browse the repository at this point in the history 
…yed (#2229)

* fix(date-picker): repair the issue of default values not being displayed

* test(date-picker): update the snapshot
  • Loading branch information
@liect
liect authored Jan 4, 2023
1 parent 15a3d42 commit 1d2d5b2
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 20 deletions.
50 changes: 31 additions & 19 deletions src/date-picker/hooks/useRange.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,27 +133,39 @@ export default function useRange(props: TdDateRangePickerProps) {
}));

// 输入框响应 value 变化
watch(value, (value) => {
if (!value) {
inputValue.value = [];
return;
}
if (!isValidDate(value, formatRef.value.format)) return;

inputValue.value = formatDate(value, {
format: formatRef.value.format,
});
});
watch(
value,
(value) => {
if (!value) {
inputValue.value = [];
return;
}
if (!isValidDate(value, formatRef.value.format)) return;

inputValue.value = formatDate(value, {
format: formatRef.value.format,
});
},
{
immediate: true,
},
);

// activeIndex 变化自动 focus 对应输入框
watch(activeIndex, (index) => {
if (!isMountedRef.value) {
isMountedRef.value = true;
return;
}
const indexMap = { 0: 'first', 1: 'second' };
inputRef.value?.focus?.({ position: indexMap[index] });
});
watch(
activeIndex,
(index) => {
if (!isMountedRef.value) {
isMountedRef.value = true;
return;
}
const indexMap = { 0: 'first', 1: 'second' };
inputRef.value?.focus?.({ position: indexMap[index] });
},
{
immediate: true,
},
);

return {
year,
Expand Down
2 changes: 1 addition & 1 deletion test/snap/__snapshots__/ssr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ exports[`ssr snapshot test > ssr test ./src/date-picker/_example/base.vue 1`] =

exports[`ssr snapshot test > ssr test ./src/date-picker/_example/custom-icon.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><!--[--><div class=\\"t-input__wrap\\" style=\\"\\"><div class=\\"t-input t-is-default t-is-readonly t-input--prefix t-input--suffix\\"><span class=\\"t-input__prefix t-input__prefix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z\\" fill-opacity=\\"0.9\\"></path></svg></span><div class=\\"t-input__prefix\\"><!--[--><!----><!----><!--]--></div><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><span class=\\"t-input__suffix t-input__suffix-icon\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-lock-on\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M6 10v1h4v-1H6z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z\\" fill-opacity=\\"0.9\\"></path></svg><!--]--></span></div><!----></div><!----><!--]--><!----></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup\\"><!--[--><div class=\\"t-range-input t-range-input--prefix t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z\\" fill-opacity=\\"0.9\\"></path></svg><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\"> - </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-lock-on\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M6 10v1h4v-1H6z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z\\" fill-opacity=\\"0.9\\"></path></svg><!--]--></span></div><!----></div><!----><!--]--></div></div></div><!----><!--]--><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/date-picker/_example/date-presets-alt.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup\\"><!--[--><div class=\\"t-range-input t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><!----><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\"> - </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><!----></div><!----><!--]--></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup\\"><!--[--><div class=\\"t-range-input t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><!----><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\"> - </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><!----></div><!----><!--]--></div></div></div><!----><!--]--><!--]--></div>"`;
exports[`ssr snapshot test > ssr test ./src/date-picker/_example/date-presets-alt.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup\\"><!--[--><div class=\\"t-range-input t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><!----><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value=\\"2022-01-01\\"><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\"> - </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value=\\"2022-08-08\\"><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><!----></div><!----><!--]--></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup\\"><!--[--><div class=\\"t-range-input t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><!----><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value=\\"2022-01-01 11:11:11\\"><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\"> - </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value=\\"2022-08-08 12:12:12\\"><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><!----></div><!----><!--]--></div></div></div><!----><!--]--><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/date-picker/_example/date-range.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup\\"><!--[--><div class=\\"t-range-input t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><!----><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请选择日期\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\"> - </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请选择日期\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><!----></div><!----><!--]--></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup\\"><!--[--><div class=\\"t-range-input t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><!----><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请选择日期\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\"> - </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请选择日期\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><!----></div><!----><!--]--></div></div></div><!----><!--]--><!--]--></div>"`;

Expand Down

0 comments on commit 1d2d5b2

Please sign in to comment.