Laravel Tailwind CSS Datepicker - week start on Sunday

Question

I'm using a Tailwind CSS Datepicker from Flowbite. Everything works fine, but I cannot find the option to change starting day of week to Monday instead of default Sunday.

<div date-rangepicker  class="flex items-center">
 <div class="relative">
  <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
        <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
       </div>
     <input name="start" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-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="Select date start" required>
  </div>
  <span class="mx-4 text-gray-500">to</span>
  <div class="relative">
       <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
         <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
       </div>
    <input name="end" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-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="Select date end" required>
  </div>
</div>

You can see my code upwards. For default is Sunday as a 1st day of week:

Is it possible to change it? And if it is, how?

Answer 1

Following up on Mario's answer.

Flowbite datepicker does allow you to change the locale. Check this answer on how to do it.

You should be able to change start of the week by passing in weekStart while initializing Datepicker like below -

let element = document.getElementById(elementId); //id of the input element
var options = {weekStart: 1}
var datepicker = new Datepicker(element, options)

Alternatively, you should also be able to pass in the actual locale as such -

Datepicker.locales.es = {
    days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
    daysShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
    daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
    months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
    monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
    today: "Hoy",
    monthsTitle: "Meses",
    clear: "Borrar",
    weekStart: 1,
    format: "dd/mm/yyyy"
  }

It will pick up all the localized values from the locales object.

Answer 2

This datepicker also has the option to set the first day of week to Sunday (by passing locale.sundayFirst: true as a prop):

https://github.com/mohsentaleb/react-tailwindcss-datetimepicker

You may take a look at it.

Answer 3

In Laravel with tailwindcss, flowbite and flowbite-datepicker installed via npm you do the following in app.js

import Datepicker from 'flowbite-datepicker/Datepicker';
const datepickerEl = document.getElementById('elementId'); // replace elementId
new Datepicker(datepickerEl, {
    weekStart: 1
}

Answer 4

Because Flowbite doesn't provide the command to change things such as starting day of the week, and locale. You need to change the javascript code straight from the library, that is inside the node_modules.

This is the folder directory in Laravel.

Find the Flowbite library->dist->datepicker.js

Find defaultOptions variable, and modified the weekStart to 1.

The result:

N.B: You can also define a new locale using this method.
You need to download the library into the project for this to work.