Laravel Tailwind CSS Datepicker - 星期从星期日开始

Question

我正在使用来自 Flowbite 的 Tailwind CSS Datepicker。 一切正常，但我找不到将一周中的开始日期更改为星期一而不是默认星期日的选项。

<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>

你可以看到我的代码向上。 默认将星期日作为一周的第一天：

有可能改变它吗？ 如果是，如何？

Answer 1

因为 Flowbite 不提供更改诸如一周的开始日期和区域设置之类的命令。 您需要直接从位于 node_modules 的库中更改 javascript 代码。

这是Laravel中的文件夹目录。

找到 Flowbite 库->dist->datepicker.js

找到 defaultOptions 变量，并将 weekStart 修改为 1。

结果：

注意：您也可以使用此方法定义新的语言环境。
您需要将库下载到项目中才能正常工作。

Answer 2

跟进马里奥的回答。

Flowbite datepicker确实允许您更改语言环境。 检查此答案以了解如何操作。

您应该能够通过在初始化weekStart时传入Datepicker来更改一周的开始，如下所示 -

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

或者，您也应该能够像这样传递实际的语言环境 -

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"
  }

它将从locales object 中获取所有本地化值。