How to trigger event on input date select when value is unchanged?

Question

I am pre-selecting a date on <input type='date' /> and want the user to select a date anyway. If the date selected is the same as the pre-selected value, it does not trigger the change event in jQuery.

Also tried blur and input, but on blur only activates when losing the focus of the element, not on date selection. On input seems to have the same result as on change.

Any ideas how to achieve this?

The pre-selected date is a suggested date which can be chosen or another date could be chosen.

<input id="my-date" type="date" value="2024-07-20" />

// ..

$( '#container' ).on( 'change', '#my-date', function()
{
    console.log( 'selected date: ' + $( this ).val() );
});

Answer 1

I am proposing a solution by making value null while selecting the date:

Working snippet:

var input = document.getElementById('mydate');

input.onclick = function () {
  this.value = null;
};
  
input.onchange = function () {
  console.log(this.value);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type="date" id="mydate" value="2024-07-24">