Jquery datepicker. 2 datepickers. Restrict range. Default date current date

Question

I am using the jQuery Datepicker widget with two input boxes, one for the "From" date and the second with the "To" date. I am using the jQuery Datepicker but I need these additional restrictions:

Both "From" date and "To" date have to show current date highlighted in the calendar by default.
If a "To" date is selected first, then the "From" date can only be within the range of 31 days before the "To" date. If "From" date is selected first then "To" date can only be within the range of 31 days after "From" date. Rest of the dates should be disabled in either case.
I need the dates in dd-mm-yyyy format.

first point should be a default behaviour if nothing is specified about the default date. What have you tried so far? Show your code and where you get stuck at — Lelio Faieta
I tried the best answer code on this link: stackoverflow.com/questions/330737/… but in this all the dates post current date are disabled and also some min date is there.. i don't have any of those constraints. — UIPassion

Aneesh Sivaraman Aneesh Sivaraman · Accepted Answer · 2017-03-20T13:18:50

Please use the following code.

$( function() {
    $("#fromDate").datepicker({
          dateFormat: 'yy-mm-dd',
        inline: true,
        onSelect: function(date, inst) {
                 var selDate = new Date(date);
                 var newDate = new Date(selDate.getFullYear(), selDate.getMonth(), selDate.getDate()+31);
                  $('#toDate').datepicker('option', 'minDate', selDate );
                  $('#toDate').datepicker('option', 'maxDate', newDate );
        }
        });
        $("#fromDate").datepicker('setDate', new Date());

    $( "#toDate" ).datepicker({
            dateFormat: 'yy-mm-dd',
            inline: true,
            onSelect: function(date, inst) {
                 var selDate = new Date(date);
                 var newDate = new Date(selDate.getFullYear(), selDate.getMonth(), selDate.getDate()-31);
                  $('#fromDate').datepicker('option', 'minDate', newDate );
                  $('#fromDate').datepicker('option', 'maxDate', selDate );
            }
    });
    $("#toDate").datepicker('setDate', new Date());
  } );

Refer Fiddle

Jquery datepicker. 2 datepickers. Restrict range. Default date current date

1 Answers