Date format for dateRangepicker

[Eduardo-XavierPaula]

It seems that there is no way to set a date format for the dateRangePicker. Therefore, when I set a date as the value of the input, it doesn't follow the format I have specified.

Here is my code:

<div date-rangepicker class="flex items-center col-span-2 max-md:col-span-full gap-6">
  <div class="irr-form-group">
      <label class="control-label" for="stat_start_date">
          <span>
              Data de início
          </span>
      </label>
      <div class="relative w-full">
          <input
              name="stat_start_date"
              id="stat_start_date"
              type="text"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pr-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Selecione a data inicial"
              value="13/04/2023"
              datepicker-format="dd/mm/yyyy"
          >
          <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
              <span class="material-symbols-outlined">
                  calendar_today
              </span>
          </div>
      </div>
  </div>
  <div class="irr-form-group">
      <label class="control-label" for="stat_end_date">
          <span>
              Data final
          </span>
      </label>
      <div class="relative w-full">
          <input
              name="stat_end_date"
              id="stat_end_date"
              type="text"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pr-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              value="13/07/2023"
              placeholder="Selecione a data final"
              datepicker-format="dd/mm/yyyy"
          >
          <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
              <span class="material-symbols-outlined">
                  calendar_today
              </span>
          </div>
      </div>
  </div>
  </div>

Since the values of the input were set, it was expected to show the date in the format dd/mm/YYYY. However, instead of displaying the date in this format, it appears as mm/dd/YYYY. As a result, when it tries to apply the 13th day, it interprets it as the 13th month and adds another year on the value:

I'm on Flowbite(1.7).

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

[Eduardo-XavierPaula]

Sorry it seens there was another issue about this: https://github.com/themesberg/flowbite/issues/520#issue-1656167429

[Eduardo-XavierPaula]

Found the problem , I needed to set the format in the parent div where the attribute date-rangepicker was, not on each input.

<div class="flex items-center col-span-2 max-md:col-span-full gap-6" 
   date-rangepicker  
   datepicker-format="dd/mm/yyyy"<!--set format here-->
>
  <div class="irr-form-group">
      <label class="control-label" for="stat_start_date">
          <span>
              Data de início
          </span>
      </label>
      <div class="relative w-full">
          <input
              name="stat_start_date"
              id="stat_start_date"
              type="text"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pr-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Selecione a data inicial"
              value="13/04/2023"
          >
          <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
              <span class="material-symbols-outlined">
                  calendar_today
              </span>
          </div>
      </div>
  </div>
  <div class="irr-form-group">
      <label class="control-label" for="stat_end_date">
          <span>
              Data final
          </span>
      </label>
      <div class="relative w-full">
          <input
              name="stat_end_date"
              id="stat_end_date"
              type="text"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pr-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              value="13/07/2023"
              placeholder="Selecione a data final"
          >
          <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
              <span class="material-symbols-outlined">
                  calendar_today
              </span>
          </div>
      </div>
  </div>
  </div>