beforeShowDay disables minDate in jQuery datepicker

Question

I'm using two jQuery datepickers, with disabled dates based on a generated array. When I put the $("#date") datepickers after the $('input') one, that works fine. However, I also need a mindate set to today, and a maxDate set to 1 year after that; it works when the order is the other way around. How can I manage to make them both work?

$(function() {
    var array=[]; //disabled dates for the beforeShowDay go here

    $('input').datepicker({
      beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, array) == -1];
      }
    });

    $( "#date" ).datepicker({
      dateFormat: 'yy-mm-dd',
      minDate: new Date(),
      maxDate: '+1y',
      onSelect: function(date){

        var selectedDate = new Date(date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);
        $("#date1").datepicker( "option", "minDate", endDate );
        $("#date1").datepicker( "option", "maxDate", '+1y' );
      }
    });

    $("#date1").datepicker({
      dateFormat: 'yy-mm-dd',
    });
  });

Answer 1

I would not try to apply two selectors ('input' and '#date') on the same DOM element because the second can override what the first configured. If you would like that both datepickers share the same beforeShowDay function you can declare it once and assign it to each datepicker.

It is not totally clear to me what you want to achieve. But maybe the following approach with a common beforeShowDay function could help. In any case the example below will show you how to insert a JSFiddle including datepicker into your question to clarify what you want.

 $(function() { var array=['2016-12-08']; //disabled dates for the beforeShowDay go here var beforeShowDay = function(date){ var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [$.inArray(string, array) == -1]; }; $( "#date" ).datepicker({ beforeShowDay: beforeShowDay, dateFormat: 'yy-mm-dd', minDate: new Date(), maxDate: '+1y', onSelect: function(date){ var selectedDate = new Date(date); var msecsInADay = 86400000; var endDate = new Date(selectedDate.getTime() + msecsInADay); $("#date1").datepicker( "option", "minDate", endDate ); $("#date1").datepicker( "option", "maxDate", '+1y' ); } }); $("#date1").datepicker({ beforeShowDay: beforeShowDay, dateFormat: 'yy-mm-dd' }); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input id="date"> <input id="date1">