如何在日期选择器上键入后验证日期范围

Question

I have two datepickers. one is a start date and one is an end date. Now I can detect whether the start date is indeed earlier than the end date. And the datepickers and validations work fine as long as the user selects a date on the calendar. My problem lies when I start typing a date on the End date. For example, the start date field is May 02 2019 with the format 2019-05-02. Now when I start typing on the end date field let's say 2 in the value 2019, the alert box doesnt wait for me to type the whole date input and notifies me that the end date shouldnt be earlier than the start date. is there any workaround for this regarding the code's logic other than a band-aid solution of converting the datepicker fields to readonly?

here's the code for the end date:

$('.endDate').each(function (index) 
{
    $(this).attr("id", "pmed" + index);
    $(this).datepicker({
        format: 'yyyy-mm-dd'
    }).on('changeDate', function (endDate) 
    {

          // Do something
          let newEnddate = new Date(endDate.date)
          newEnddate.setDate(newEnddate.getDate() + 1)
          let start_date = parseInt((new Date($("#pmst" + index).val())) / (1000 * 60 * 60 * 24))
          let end_date = parseInt(newEnddate / (1000 * 60 * 60 * 24))
          var inputCTR = parseInt(index) + 1
          if (start_date > end_date) {
            //alert("Starting date must not be less than End date.")
                    $(this).val("")
                    $('#pmst' + inputCTR).prop('disabled', true);
                    $('#pmed' + inputCTR).prop('disabled', true);
                    start_date = "NaN"
                }
                start_date = start_date.toString()
                if (start_date != "NaN" && end_date != "") {
                    $('#pmst' + inputCTR).prop('disabled', false);
                    $('#pmed' + inputCTR).prop('disabled', false);
                }


    });

});

Answer 1

HTML5 has a new input type date for which you don't need to use a script for validation. The max and min attribute specify the range through HTML.

<input type="date" max="maxDate" min="minDate">

Answer 2

As you said, the validator is not waiting for you, so in order to make it wait use debounce. If you dont know what debounce is read it here. https://www.geeksforgeeks.org/debouncing-in-javascript/

Example

$('.endDate').each(function (index){
        $(this).attr("id", "pmed" + index);
        $(this).datepicker({
            format: 'yyyy-mm-dd'
        }).on('changeDate', $.debounce(1000, function (endDate) { //1000 is in milliseconds  
            // Do something
            let newEnddate = new Date(endDate.date)
            newEnddate.setDate(newEnddate.getDate() + 1)
            let start_date = parseInt((new Date($("#pmst" + index).val())) / (1000 * 60 * 60 * 24))
            let end_date = parseInt(newEnddate / (1000 * 60 * 60 * 24))
            var inputCTR = parseInt(index) + 1
            if (start_date > end_date) {
                //alert("Starting date must not be less than End date.")
                $(this).val("")
                $('#pmst' + inputCTR).prop('disabled', true);
                $('#pmed' + inputCTR).prop('disabled', true);
                start_date = "NaN"
            }
            start_date = start_date.toString()
            if (start_date != "NaN" && end_date != "") {
                $('#pmst' + inputCTR).prop('disabled', false);
                $('#pmed' + inputCTR).prop('disabled', false);
            }
        }));
    });

---

There could be some coding errors as i have not run it myself but debounce is a perfect use case for you.