Today Button Not Working in DateRangePicker and DatePicker
cicimbrus opened this issue · 2 comments
cicimbrus commented
Description:
I am using the DateRangePicker from flowbite-datepicker in my Laravel project. Everything works fine, including the "Clear" button and date selection, but the "Today" button does not set the date to today's date when clicked.
Steps to Reproduce:
Install flowbite
and flowbite-datepicker
via npm.
Import and initialize DateRangePicker
in app.js
.
- import
flowbite
; - import
DateRangePicker
fromflowbite-datepicker/DateRangePicker
;
document.addEventListener('DOMContentLoaded', () => {
const dateRangePickerEl = document.getElementById('date-range-picker');
if (dateRangePickerEl) {
new DateRangePicker(dateRangePickerEl, {
autohide: true,
todayBtn: true,
clearBtn: true,
format: 'yyyy-mm-dd',
weekStart: 1,
todayHighlight: true,
});
}
});
- Add the following HTML to my Blade template:
<div id="date-range-picker" date-rangepicker class="flex items-center" datepicker-buttons datepicker-autoselect-today>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
</svg>
</div>
<input autocomplete="off" name="start" 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 ps-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">
</div>
<span class="mx-4 text-gray-500">to</span>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
</svg>
</div>
<input autocomplete="off" name="end" 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 ps-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">
</div>
</div>
Expected Behavior:
When clicking the "Today" button, the date picker should set the date fields to today's date.
Actual Behavior:
The "Today" button is visible, but clicking it does not set the date fields to today's date.
Additional Information:
flowbite
version: [2.3.0]flowbite-datepicker
version: [1.2.6]
Thank you for your assistance!
cicimbrus commented
I solved the problem by adding an option. todayBtnMode
with mode 1
.
document.addEventListener('DOMContentLoaded', () => {
const dateRangePickerEl = document.getElementById('date-range-picker');
if (dateRangePickerEl) {
new DateRangePicker(dateRangePickerEl, {
autohide: true,
todayBtn: true,
todayBtnMode: 1,
clearBtn: true,
format: 'yyyy-mm-dd',
weekStart: 1,
todayHighlight: true,
});
}
});