Meta Box

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

Support › General › Time field "Done" button doesn't update field if slider/select not movedResolved

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 5, 2021 at 8:20 AM #32427
    Stephen C.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?

    December 5, 2021 at 3:39 PM #32436
    Long NguyenLong 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.

    December 5, 2021 at 4:15 PM #32438
    Stephen C.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.

    December 6, 2021 at 12:39 PM #32449
    Long NguyenLong 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,
    ],
  ],
],
    December 7, 2021 at 5:26 AM #32469
    Stephen C.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.
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.