[Component name] [description of the issue]

[andremartinez]

the bug I'll be honest this may not be a bug, but a lack of knowledge from my part.

According to the Documentation

I should be able to pass data attributes to a datepicker like this:

<div
  class="relative"
  id="{{id}}"
  data-te-datepicker-init
  data-te-input-wrapper-init
  data-te-title="Selecione a Data"
  data-te-ok-btn-text="OK"
  data-te-clear-btn-text="Limpar"
  data-te-months-full="['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro']"
  data-te-cancel-btn-text="cancelar">
... more code after this

However I'm getting the following error:

ERROR Error: DATEPICKER: Option "monthsFull" provided type "string" but expected type "array".
    at tw-elements.es.min.js:80:13
    at Array.forEach (<anonymous>)
    at N (tw-elements.es.min.js:77:18)
    at Gg._getConfig (tw-elements.es.min.js:5398:8)
    at new Gg (tw-elements.es.min.js:5330:94)
    at tw-elements.es.min.js:10524:15
    at Array.forEach (<anonymous>)
    at Jm (tw-elements.es.min.js:10522:43)
    at tw-elements.es.min.js:10527:20
    at Array.forEach (<anonymous>)

Is the component not able to convert the array or I'm the one passing data the wrong way?

To Reproduce Steps to reproduce the behavior:

1. Try to create an datepicker, the simple example will suffice
2. Try to pass options that are array via HTML5 data attributes
3. See error

Expected behavior The months names should be translated, as seen in the array

Actual behavior The data-te-months-full, when passing an array says it's a string

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser Chrome

[juujisai]

Hi, try passing the array with use of javascript like in this example: https://tailwind-elements.com/docs/standard/forms/datepicker/#section-translations

[andremartinez]

Hi, try passing the array with use of javascript like in this example: https://tailwind-elements.com/docs/standard/forms/datepicker/#section-translations

Hi @juujisai , the javascript declaration partially works, the translations are shown, but the component fails silently then pressing cancel.

[juujisai]

I have updated the snippet for datepicker with translations but I am not sure that it will solve your issue. The problem is that I cannot recreate the silent failing that you are experiencing.

Could you describe what do you mean by that? Does it only happen when you are adding the translations?

[andremartinez]

Could you describe what do you mean by that? Does it only happen when you are adding the translations?

Sure, I should have explained that properly from the beginning . The code might be incomplete as it is now because I was tinkering with it.

I Initialize it like this within an Angular Component:

      @AngularInput() name = 'datepicker';
      
      const datePicker = document.getElementById(this.name);

      const datepickerTranslated = new Datepicker(
        datePicker,
        {
          ,monthsFull: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho"
                       ,"Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"]
          ,monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"]
          ,weekdaysFull: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"]
          ,weekdaysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sat"]
          ,weekdaysNarrow: ["D", "S", "T", "Q", "Q", "S", "S"]
        });

The component HTML code is next:

<div
  class="relative"
  [attr.id]="name"
  [attr.name]="name"
  data-te-datepicker-init
  data-te-input-wrapper-init
  data-te-title="Selecione a Data"
  data-te-ok-btn-text="OK"
  data-te-clear-btn-text="Limpar"
  data-te-cancel-btn-text="cancelar" >
  <input
    type="text"
    class="peer block w-full rounded border-0 bg-transparent px-3 py-[0.32rem] 
           leading-[2.15] 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 
           [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
    placeholder="{{labelText}}"
    (change)="onSelectedDateChange($event)"
    dateChange.te.datepicker=""/>
  <label  for="{{name}}"
          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">
          {{labelText}} <b style="color: red;">*</b></label>
</div>

The behavior I'm getting is, it shows the translations properly, but when I press cancel or just click outside the datepicker, the translations are replaced by english text, the datepicker hides itself, but the backdrop won't go away, so I get locked in a screen where I can't interact with anything.

Pressing Esc on the keyboard throws an error (I can't get the full message for that error right now, sorry), saying that it couldn't find the element to run the command to hide

[juujisai]

I didn't see that earlier but the issue may be that you are initing the datepicker with data attributes and js at the same time. You have data-te-datepicker-init that will init the datepicker automaticaly after calling the initTE method. Then the second time with JS and adding the translations. Try removieng the data-te-datepicker-init and see whether the issue still occurs.