DatePicker personalized months

[leo-r37]

Hello everyone! I am trying to use the DatePicker component with the translated month labels. It happens that, when I pass the months as an array, I get the following error:

Unhandled Runtime Error
Error: DATEPICKER: Option "monthsFull" provided type "string" but expected type "array".

Source
src\components\RightDrawer\RDAgregarIntervencion.tsx (13:6) @ initTE

11 | const init = async () => {
12 | const { Datepicker, Select, Input, initTE } = await import("tw-elements");

13 | initTE({ Datepicker, Select, Input });

However, I am passing the array as follows
data-te-months-full={[
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
]}

Below is the complete component:
<div
className="relative"
data-te-datepicker-init
data-te-inline="true"
data-te-input-wrapper-init
data-te-months-full={[
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
]}
data-te-months-short={[
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
]}
data-te-class-datepicker-cell-content="mx-auto group-[[data-te-datepicker-cell-selected]]:bg-blue-500 group-[[data-te-datepicker-cell-selected]]:text-white group-[[data-te-datepicker-cell-focused]]:data-[te-datepicker-cell-selected]:bg-blue-500 group-[[data-te-datepicker-cell-current]]:border-solid group-[[data-te-datepicker-cell-current]]:border group-[:not([data-te-datepicker-cell-disabled]):not([data-te-datepicker-cell-selected]):hover]:bg-white/10 group-[[data-te-datepicker-cell-current]]:border-white group-[:not([data-te-datepicker-cell-selected])[data-te-datepicker-cell-focused]]:bg-white/10 text-white group-[[data-te-datepicker-cell-disabled]]:text-neutral-500"
data-te-class-datepicker-dropdown-container="w-[328px] h-[380px] bg-zinc-700 rounded-lg shadow-[0px_2px_15px_-3px_rgba(0,0,0,.07),0px_10px_20px-2px_rgba(0,0,0,.04)] z-[1066] dark:bg-zinc-700"
>


Select a date

Can anyone help me please?

[juujisai]

For options that require arrays/objects it's best to use the JS initialization. Try initializing the component via JS. Checkout the example in our docs

https://tailwind-elements.com/docs/standard/forms/datepicker/#section-translations

[leo-r37]

The problem when I initialize it with JS is that, when selecting a date, the datePicker gets stuck, it does not close. I don't know what the reason is. Maybe I'm implementing it wrong.

Below I show you how I initialize it:

const RDAgregarIntervencion = () => {
useEffect(() => {
 const init = async () => {
   const { Datepicker, TimePicker, Select, Input, initTE } = await import(
     "tw-elements"
   );
   initTE({ Datepicker, TimePicker, Select, Input });
   const datepickerTranslated = new Datepicker(
     document.querySelector("#dataPickerTWE"),
     {
       title: "Datum auswählen",
       monthsFull: [
         "Januar",
         "Februar",
         "März",
         "April",
         "Mai",
         "Juni",
         "Juli",
         "August",
         "September",
         "Oktober",
         "November",
         "Dezember",
       ],
       monthsShort: [
         "Jan",
         "Feb",
         "Mär",
         "Apr",
         "Mai",
         "Jun",
         "Jul",
         "Aug",
         "Sep",
         "Okt",
         "Nov",
         "Dez",
       ],
       weekdaysFull: [
         "Sonntag",
         "Montag",
         "Dienstag",
         "Mittwoch",
         "Donnerstag",
         "Freitag",
         "Samstag",
       ],
       weekdaysShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
       weekdaysNarrow: ["S", "M", "D", "M", "D", "F", "S"],
       okBtnText: "Ok",
       clearBtnText: "Klar",
       cancelBtnText: "Schließen",
     }
   );
 };
 init();
}, []);

//...

<div
       id="dataPickerTWE"
         className="relative mb-3"
         data-te-datepicker-init
         data-te-input-wrapper-init
         data-te-confirm-date-on-select='true'
         data-te-class-modal-container="flex flex-col fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[328px] h-[512px] bg-oscuro rounded-[0.6rem] shadow-lg z-[1066] xs:max-md:landscape:w-[475px] xs:max-md:landscape:h-[360px] xs:max-md:landscape:flex-row"
         data-te-class-datepicker-footer-btn="outline-none bg-oscuro text-blue-500 border-none cursor-pointer py-0 px-2.5 uppercase text-[0.8rem] leading-10 font-medium h-10 tracking-[.1rem] rounded-[10px] mb-2.5 focus:bg-neutral-200  dark:text-white hover:bg-white/10 dark:focus:bg-white/10"
       >
         <input
           type="text"
           className="peer block min-h-[auto] w-full rounded border-0 bg-oscuro px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none text-neutral-200 placeholder:text-neutral-200 peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
           placeholder="Select a date"
         />
         <label
           htmlFor="floatingInput"
           className="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>
//...

[juujisai]

Try removing either the Datepicker from the initTE method or removing the data-te-datepicker-init attribute from the input wrapper. I think that the component may be initialized twice (once with the initTE method and once with use of js - new Datepicker(...)) and that causes those issues

[leo-r37]

You are a genious! Thank you so much! That was the problem. I just removed the data-to-datepicker-init attribute and it worked