Rank 1
Hello, I am using the DatePicker component from the @progress/kendo-vue-dateinputs package.
I am trying to update the value of the date picker in a unit test using vue-test-utils.
I have tried the following, which is how I would ordinarily update input values:
const input = wrapper.find('input[id="my-date-field"]');
endDateInput.setValue('01/01/2025');
await nextTick();
endDateInput.trigger('change');
await nextTick();
This does seem to update the value, but does not update it correctly.
A snapshot of the markup after setting the value this way shows that it appears to set the year based on the last 2 digits of the new value, but not correctly, and it is also missing the dd/mm parts:
<input role="combobox"class="k-input-inner" id="my-date-field" value="dd/mm/0025" etc...>Is there a way in which I can update the date picker value correctly?
I appreciate that the calendar popup is appended to <body>, so setting the value using that programatically is not possible, but any way of being able to update the input value is fine.
Happy to provide a minimal repro if required.
I can suggest triggering the DatePicker’s change event with a Date object, then updating `change` the prop:
import { nextTick } from 'vue'; const datePickerWrapper = wrapper.findComponent({ name: 'DatePicker' }); // Simulate Kendo DatePicker change event await datePickerWrapper.trigger('change', { value: new Date('2025-01-01') }); // Simulate parent updating the value prop await wrapper.setProps({ value: new Date('2025-01-01') }); await nextTick();Regards,
Filip