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 from date picked. I also checked the minDate and maxDate documents but I still couldn't try figuring it out.

I want to keep the default setting it has which is after date from is chosen date to cannot be before the from date vise versa but also want to add another restriction which is both datepickers have a maxDate of 0 which is today. None of them can be picked pass today.

This is pretty much just the standard.

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

I tried adding these two but none of them works though

$( "#date-from-field" ).datepicker({maxDate: "0"});
$( "#date-from-field" ).datepicker({maxDate: "+0m +0w"});

but none of them work though.

Thank you in advance.

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!