Datepicker Format to allow more date formats

[agaktr]

Currently the datepicker has a "dd-mm-yyyy" format range and variations of this string format.

We should allow formats of different use cases

ex.
Instead of 26/02/2024 you may want to use a more readable date format of Monday 26 February 2024 or something else.

we should allow all the date strings to be compatible with the datepicker

[iprzybysz]

Hi @agaktr, our Datepicker component provides a variety of date format combinations, also as you mentioned Monday 26 February 2024.

Check out this code:

<div
  class="relative mb-3"
  data-te-datepicker-init
  data-te-format="dddd dd mmmm yyyy"
  data-te-input-wrapper-init>
  <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"
    placeholder="Select a date" />
  <label
    for="floatingInput"
    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 date</label
  >
</div>

More information about date formats, you'll find in the Datepicker Documentation.