I am using Ant Design’s timepicker component on a project of mine, to set the shift start and end time of a user. When a user is created, the start and end shift times are mandatory. And the user is able to see what time they have selected as a preview in the timepicker component (default expected behaviour), when they change the time in the timepicker.
However, when the user decides the change the shift time, a problem arises. They are not able to see the newly chosen time whenever they change the time. Only when they submit the form, and open it again, they are able to see the changed time. However, if they clear the timepicker and set an new time, or if they select the Now
option in the timepicker, they are able to see the changes even if they change the time again normally after that.
To put it clearly, users are not able to see the changed time preview whenever they change the time. And it works normally when the field is cleared or the time is set to Now
and the changed again.
I don’t know why this happens, please help me out.
<Form.Item
name="shift_start"
label="Shift Start Time"
rules={[
{ required: true, message: "Please select the shift start time." },
]}
>
<TimePicker
format="HH:mm"
use12Hours={false} // Ensure 24-hour format
defaultValue={moment("00:00", "HH:mm")}
value={moment(shiftStartTime, "HH:mm")}
onChange={(time, timeString) => {
console.log("Selected shift start time:", time, timeString);
setShiftStartTime(timeString);
}}
/>
</Form.Item>
This is the form item with the shift start time.