TW-Elements icon indicating copy to clipboard operation
TW-Elements copied to clipboard

[datetimepicker] [format24 is not applied for inline timepicker]

Open mathieutho opened this issue 1 year ago • 2 comments

Describe the bug timepicker option "format24" is not applied for inline timepicker.

To Reproduce Use component datetimepicker with timepicker options format24=true and inline=true.

Expected behavior Timepicker format is 24h.

Actual behavior timepicker format is 12h.

Show your code

<div
  class="relative mb-3"
  data-te-input-wrapper-init
  id="datetimepicker-timeOptions">
  <input
    type="text"
    class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
    id="form9" />
  <label
    for="form9"
    class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>
const pickerTimeOptions = document.querySelector('#datetimepicker-timeOptions');
new te.Datetimepicker(pickerTimeOptions, {
  timepicker: { format24: true, inline: true },
});

mathieutho avatar Sep 15 '23 13:09 mathieutho

try add this class in the first div data-te-format24="true"

hellyanggara avatar Sep 18 '23 02:09 hellyanggara

Hi! Thanks for reporting this issue. I'm adding this bug to our to-fix list.

juujisai avatar Sep 18 '23 05:09 juujisai