Jquery. Detect changes on input type 'date'

Question

on the mobile version of my site I am using input type=date instead of a jquery datepicker to allow for use of the devices inbuilt datepicker as it's generally much quicker and easier to use.

I am trying to detect when 1 date field has a value inputted/changed, to then update the min date attribute of a second datefield, and , submit the form using ajax.

I cannot correctly detect the input or change.

$('#mob-gig-date-gteq').blur(function() {
    var date = $("#mob-gig-date-gteq").val();
    console.log(date)
    $(this).closest("form").submit();
});

(Using .change yields the same results)

If I select a date here nothing happens. On the computer if I select a date, press enter on one of the inputs (day/month/year) and THEN change the date again, the code fires. On mobile nothing happens at all.

How can I detect the input change on a date field?

Thanks.

Answer 1

Try the jquery .change method. Blur will only fire when the input loses focus.

$('#mob-gig-date-gteq').change(function() {
    var date = $(this).val();
    console.log(date, 'change')
});

Code pen tested in chrome