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?

I just brute force it by modified the code inside the node_modules. — Mario Ariyanto, Aug 31 '22 at 23:54
You should be able to pass in `weekStart` value in `options` when instantiating a new datepicker. Check this out - https://stackoverflow.com/questions/73566007/how-to-change-the-locale-in-flowbite-datepicker — mojorisinify, Sep 10 '22 at 23:51

mojorisinify · Answer 1 · 2022-09-12T19:49:31.403

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.

score -2 · Accepted Answer · answered Sep 02 '22 at 01:38

-2

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.

answered Sep 02 '22 at 01:38

Mario Ariyanto

157
1
1
12

2

The edits you make in the node_modules will go away when doing a fresh `npm install`. This is a hacky way of making this work. You should be able to pass in `options` while calling Datepicker constructor. I made a comment above. – mojorisinify Sep 10 '22 at 23:53
Yes, that's why I said it is a brute force method. Works but not the best way to do – Mario Ariyanto Sep 12 '22 at 01:37
Do not use this approach. It will lead to dodgy stuff like committing node_modules or forking the repo. Change the settings as per mojorisinify's answer. – Jess Nielsen Apr 10 '23 at 07:56

Laravel Tailwind CSS Datepicker - week start on Sunday

2 Answers2