Jquery datepicker restrict dates in second date field based on selected date in first date field

by

I created a jsfiddle for you.
I’m not a 100% sure if it’s “foolproof” but to prevent users from manually typing a date you could set the inputs to readonlye.g.

<input type="text" id="dt1" readonly="readonly">

At the moment I check the dt2 onClose and if its date is below dt1s date I correct it.
Also if a date is selected in dt1 the minDate of dt2 is set to dt1 date +1.

$(document).ready(function () {

    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate() + 1);
            $('#dt2').datepicker('setDate', date2);
            //sets minDate to dt1 date + 1
            $('#dt2').datepicker('option', 'minDate', date2);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy",
        onClose: function () {
            var dt1 = $('#dt1').datepicker('getDate');
            var dt2 = $('#dt2').datepicker('getDate');
            //check to prevent a user from entering a date below date of dt1
            if (dt2 <= dt1) {
                var minDate = $('#dt2').datepicker('option', 'minDate');
                $('#dt2').datepicker('setDate', minDate);
            }
        }
    });
});

See the jsfiddle

More Related Contents:

  1. jQuery Datepicker onchange event issue
  2. jQuery Date Picker – disable past dates
  3. jQuery UI Datepicker onchange event issue
  4. JQuery ui – date picker, disabling specific dates
  5. Jquery datepicker – only day and month
  6. jQuery datepicker- 2 inputs/textboxes and restricting range
  7. Jquery Date picker Default Date
  8. How to change the element of another div by clicking and hovering on an element of a different div
  9. Hide/Show div on specific page with jquery
  10. HTML nchor Tag doesn’t show link
  11. Use jQuery to hide a DIV when the user clicks outside of it
  12. Clear form fields with jQuery
  13. How to detect if two divs touch with jquery?
  14. jQuery find closest previous sibling with class
  15. How to detect input type=file “change” for the same file?
  16. How to get only direct text without tags with jQuery in HTML
  17. jQuery select change show/hide div event
  18. How to use jQuery to add form elements dynamically
  19. Setting min date in jQuery datepicker
  20. Get the value of -webkit-transform of an element with jquery
  21. Auto-click button element on page load using jQuery
  22. jQuery get selected option value (not the text, but the attribute ‘value’)
  23. Draggable div without jQuery UI
  24. How to force an HTML form to validate without submitting it via jQuery
  25. Trying to make multiple background images cycle through a slideshow with CSS and JQUERY
  26. Jquery Multiple load in a DIV
  27. How add spaces between Slick carousel item
  28. Datatables warning(table id = ‘example’): cannot reinitialise data table
  29. jQuery web page height
  30. How do I select an element with special characters in the ID?

Leave a Comment