detect datepicker on change

[jerichosiahaya]

how can i detect the change on datepicker?

tried using this:

$('#startDate').change(function() {
    var date = $('#startDate');
    console.log(this.value);
  });

but it doesnt work.

the html code looks like this:

<div id="datepickercsv" 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 aria-hidden="true" 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 id="startDate" name="startDateFilter" 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 datepicker-input" placeholder="Select date start">
              </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 aria-hidden="true" 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 id="endDate" name="endDateFilter" 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 datepicker-input" placeholder="Select date end">
              </div>
            </div>

[chrisjingram]

If anyone lands here from Google, I just dug through the source code and found an event called changeDate that you can listen for.

In plain JS:

datepickerElement.addEventListener('changeDate', (e) => {
  console.log(e.target.value);
});

Or as the original question is in jQuery:

$('#startDate').on('changeDate', function(){
  console.log(e.target.value);
});

[pv5pm]

it is not working

[leonghia]

Works perfectly for me.

[henrik561]

it is not working

Sorry for late reply but i hope i can help someone, but u have to set the input type to "date":

            <input ref="datepickerInput" v-model="picker.date" @changedate="handleDateChange" id="datepicker-format"
                datepicker datepicker-format="mm-dd-yyyy" type="date"
                class="border-gray-300 w-full focus:border-indigo-500 focus:ring-indigo-500 ps-10 rounded-md shadow-sm"
                placeholder="Select date" />

and then u can call changeDate, in my case im using vue3 so @changedate

[beaubus]

I have added a 'changeDate' event listener to both inputs, and it is working properly.

document.querySelector('input[name=startDateFilter]').addEventListener('changeDate', (e) => {
    console.log('start date is: ' + e.target.value);
});

document.querySelector('input[name=endDateFilter]').addEventListener('changeDate', (e) => {
    console.log('end date is: ' + e.target.value);
});