blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

fix(DatePicker): should display correctly when modelValue is updated from external (#11839)

Browse Source 
* fix(DatePicker): should be displayed correctly when modelValue updated by external sources

* fix: optimize logic
This commit is contained in:
inottn 2023-05-15 21:21:00 +08:00 committed by GitHub
parent cb0f859a83
commit 4b29f1006c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/vant/src/date-picker/DatePicker.tsx
View File

@ -53,6 +53,7 @@ export default defineComponent({
setup(props, { emit, slots }) {
const currentValues = ref<string[]>(props.modelValue);
const updatedByExternalSources = ref(false);
const genYearOptions = () => {
const minYear = props.minDate.getFullYear();
@ -76,7 +77,9 @@ export default defineComponent({
const getValue = (type: DatePickerColumnType) => {
const { minDate, columnsType } = props;
const index = columnsType.indexOf(type);
const value = currentValues.value[index];
const value = updatedByExternalSources.value
? props.modelValue[index]
: currentValues.value[index];
if (value) {
return +value;
}
@ -146,11 +149,16 @@ export default defineComponent({
watch(
() => props.modelValue,
(newValues) => {
(newValues, oldValues) => {
updatedByExternalSources.value = isSameValue(
oldValues,
currentValues.value
);
newValues = formatValueRange(newValues, columns.value);
if (!isSameValue(newValues, currentValues.value)) {
currentValues.value = newValues;
}
updatedByExternalSources.value = false;
},
{
immediate: true,

21
packages/vant/src/date-picker/test/index.spec.ts
View File

@ -200,3 +200,24 @@ test('should update value correctly when dynamically change min-date', async ()
wrapper.emitted<[PickerConfirmEventParams]>('confirm')![0][0].selectedValues
).toEqual(['2020', '12', '20']);
});
test('should be displayed correctly when modelValue updated by external sources', async () => {
const wrapper = mount(DatePicker, {
props: {
modelValue: ['2023', '12'],
columnsType: ['year', 'month'],
minDate: new Date(2023, 5, 1),
maxDate: new Date(2024, 5, 1),
},
});
await wrapper.setProps({ modelValue: ['2024', '01'] });
const selectedItems = wrapper.findAll('.van-picker-column__item--selected');
expect(selectedItems[0].text()).toEqual('2024');
expect(selectedItems[1].text()).toEqual('01');
await wrapper.find('.van-picker__confirm').trigger('click');
expect(
wrapper.emitted<[PickerConfirmEventParams]>('confirm')![0][0].selectedValues
).toEqual(['2024', '01']);
});