Time field "Done" button doesn't update field if slider/select not moved

This topic has 4 replies, 2 voices, and was last updated 2 years, 11 months ago by Stephen C..

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
December 5, 2021 at 8:20 AM #32427

Stephen C.
Participant

When using the time field (timepicker), if the user clicks the "Done" button without moving the time slider or select, the timepicker closes but the input is not populated with the time. So, if the user wants to select 12:00 am, they have to move the slider or change the select box at least once, even though 12:00 am is already selected. This appears to be a bug in the jquery-timepicker-addon that was never fixed and that project is no longer maintained.

Any ideas on how to fix this without having to edit the jquery-timepicker-addon code itself?

Add New Note to this Reply

December 5, 2021 at 3:39 PM #32436

Long Nguyen
Moderator

Hi,

The default value of the timepicker field is not populated. You need to select at least one box (hour or minute) to populate the time.

I will inform the development team to consider fixing this issue in future updates.

Add New Note to this Reply

December 5, 2021 at 4:15 PM #32438

Stephen C.
Participant

When the timepicker opens, 12:00 am is populated in the select boxes. The sliders default to 00:00 which is also 12:00 am. This bug has been noted in the GitHub Issues for the Datetimepicker project by other users dating back years and the issue was never fixed.

Add New Note to this Reply

December 6, 2021 at 12:39 PM #32449
Long Nguyen
Moderator
Hi Stephen,

You can try to set the default value of a field std to save this value without selecting the time. Like this
```
'fields' => [
  [
    'name'       => __( 'Time', 'your-text-domain' ),
    'id'         => $prefix . 'time',
    'type'       => 'time',
    'std'        => '00:00',
    'js_options' => [
      'hour'   => 00,
      'minute' => 00,
    ],
  ],
],
```
Add New Note to this Reply
December 7, 2021 at 5:26 AM #32469
Stephen C.
Participant
I ended up setting the beforeShow and onClose options along with adding an event listener (for the "Done" button), to make it function the way I want. Now, it functions this way:
- The time is only truly set when the "Done" button is clicked, which I have renamed to "Set" in the options.
- If the user doesn't move any selector inside the picker, it uses the default values of the selectors.
- I also added a close icon in the top corner, so the user can close the picker by either clicking outside the picker or by clicking the close icon.
- If they close the picker without clicking the "Done" button, the input box reverts back to its previous value.
- I added an "x" on the right inside the time field input box when there is a value, so the user can clear the field (the same way Select2 does).
- The time field input box uses a floating label.
- The picker uses a slide down animation effect (showAnim option) when opening and closing.
Add New Note to this Reply
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.