Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery datepicker: Limit date from selectedDate

I'd like to restrict my calendar for users to limit date range.

For example: if a user select March 10th 2014 at From, then the user must not select after June 10th 2014 at To.

Here is the code I've made:

Thanks in advance.

$(function() {
   $( "#from" ).datepicker({
      maxDate: 0,
      dateFormat : 'dd-mm-yy',
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
        var date = $(this).datepicker('getDate');
        var maxDate = new Date(date.getMonth() + 3);
        $( "#to" ).datepicker( "option", "maxDate", maxDate );
      }
    });

    $( "#to" ).datepicker({
        maxDate: 0,
        onClose: function( selectedDate ) {
          $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
}
like image 533
Eric Lee Avatar asked Jan 29 '26 15:01

Eric Lee


1 Answers

You can get the month from From datepicker and increment to 3 months for maxDate of the To datepicker.

$("#from").datepicker({
        dateFormat: "dd-M-yy",            
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#from').datepicker('getDate');
            date2.setMonth(date2.getMonth() + 3);
            $('#to').datepicker('setDate', date2);
            $('#to').datepicker('option', 'maxDate', date2);
        }
    });
    $('#to').datepicker({
        dateFormat: "dd-M-yy",
        onClose: function () {                
            var from = $('#from').datepicker('getDate');
            console.log(from);
            var to = $('#to').datepicker('getDate');
            if (to <= from) {
                var minDate = $('#dt2').datepicker('option', 'minDate');
                $('#from').datepicker('setDate', minDate);
            }
        }
    });

Check this fiddle:

http://jsfiddle.net/PPSh3/586/

like image 148
user3263194 Avatar answered Jan 31 '26 04:01

user3263194