jquery ui datepicker - how to set two min/max date restrictions in one datepicker?

Question

I am using the jquery ui datepicker with select date range. I know that by default it already set if the from picks a date then the to date can not pick any date before the fro

Answer 1

Alright so pretty much you need to check if the selectedDate is empty when date-to-field is updated and make the maxDate to "0". Once you do it should act as you wanted, it'll set the max to today's date or if the date of the from if it's not todays date. Here's a codepen that works for me - CodePen.

    $("#date-from-field").datepicker({
  onClose: function( selectedDate ) {
      $( "#date-to-field" ).datepicker( "option", "minDate", selectedDate );
    },
  maxDate: "0"
});

$("#date-to-field").datepicker({
  onClose: function( selectedDate ) {
    $( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate ? selectedDate: "0" );
    },
  maxDate: "0"
});

EDIT

Updated the CodePen a bit more so that it checks if the selected date is greater than todays date.

$("#date-to-field").datepicker({
  onClose: function( selectedDate ) {
    var possibleDate = new Date(selectedDate);
    possibleDate = (possibleDate < new Date())?possibleDate: new Date();
    $( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate ? possibleDate: "0" );
    },
  maxDate: "0"
});

Answer 2

You can refer to this link : http://api.jqueryui.com/datepicker/#option-maxDate

This is to Initialize the datepicker with the maxDate option specified, not to set it up afterwards:

$( ".selector" ).datepicker({
  maxDate: "+1m +1w"
});

To modify/get the option, use this:

Get or set the maxDate option, after initialization:

// Getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );

// Setter
$( ".selector" ).datepicker( "option", "maxDate", "+1m +1w" );

"+0" is for now()

Same for mindate!