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

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

• javascript
• jquery
• datepicker

Share Improve this question Follow asked Oct 29, 2015 at 3:22 Mr.MMr.M 1,50144 gold badges3333 silver badges8686 bronze badges 2

• how do you want to validate? onkeyup from the the inputs or on button press? – brk Commented Oct 29, 2015 at 3:26
• hi thanks for the reply by using onkeyup – Mr.M Commented Oct 29, 2015 at 3:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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-->

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./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./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" />

Here is a simple date parision example using jQuery. Basically just use the Date object and then pare 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");
        }
    });
});