Today Button Not Working in DateRangePicker and DatePicker

[cicimbrus]

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.

1. import flowbite;

2. import DateRangePicker from flowbite-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,
       });
   }
   });

3. 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]

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,
        });
    }
});