使用jQuery，第一个日期字段不应大于第二个日期字段值

Question

Currently working on jQuery date with my current code where i can able to select the date in both the fields I want to check if user select the passport date should not be greater than expiry date.

This is my current jquery code

    function testDates() {
    var from = new Date(Date.parse($("#txt_Idt").attr("value")));
    var to = new Date(Date.parse($("#txt_Epdt").attr("value")));
    if (from > to) {
        alert("From is greater than to!");
        return;
    }
    // alert("do submit");
}

Here is the fiddle link

Answer 1

DEMO

Use onSelect option of datePicker [assuming jquery-ui datepicker from the fiddle] and change minDate and maxDate of toDate and fromDate respectively as below and make your input readonly so that user input is prevented.

$(".txt_Idt").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'mm/dd/yy',
    yearRange: '-115:+1M',
    maxDate: new Date(),
    onSelect: function(dateText) {
        $(".txt_Epdt").datepicker("option", "minDate", dateText);
    }
});
$(".txt_Epdt").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'mm/dd/yy',
    yearRange: '-115:+95M',
    onSelect:function(dateText) {
        $(".txt_Idt").datepicker('option','maxDate',dateText);
    }
});

HTML

<input type="text" placeholder="Passport Date" class="ipt_Field txt_Idt ipt_required" 
   id="txt_Idt" name="txt_Idt" readonly /> <!--Add readonly here-->
<input type="text" placeholder="Expiry Date" class="ipt_Field txt_Epdt ipt_required" 
   id="txt_Epdt" name="txt_Epdt" readonly /><!--Add readonly here-->

Answer 2

Use onSelect event of datepicker

  $(document).ready(function() { $(".txt_Idt").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'mm/dd/yy', yearRange: '-115:+1M', maxDate: new Date(), onSelect: function(dateText, inst) { var expDate = new Date($("#txt_Epdt").val()); var ppt = new Date(dateText); if (ppt > expDate) { alert(" Passport date is greater than Expiry Date!"); return; } else alert(dateText); } }); $(".txt_Epdt").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'mm/dd/yy', yearRange: '-115:+95M', onSelect: function(dateText, inst) { var from = new Date($("#txt_Idt").val()); var to = new Date(dateText); if (from > to) { alert("From is greater than to!"); return; } else alert(dateText); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <input type="text" placeholder="Passport Date" class="ipt_Field txt_Idt ipt_required" id="txt_Idt" name="txt_Idt" /> <input type="text" placeholder="Expiry Date" class="ipt_Field txt_Epdt ipt_required" id="txt_Epdt" name="txt_Epdt" /> 

Answer 3

Here is a simple date comparision example using jQuery. Basically just use the Date object and then compare them:

$(document).ready(function () {
    $('#date1').datepicker();
    $('#date2').datepicker();

    $('#date2').on('change', function () {
        var date1 = new Date($('#date1').val());
        var date2 = new Date($('#date2').val());
        console.log(date1);
        console.log(date2);

        if (date1 > date2) {
            alert("date1 is greater than date2");
        }
    });
});