Jquery UI datepicker combining functions

Question

I use a script (1) from the jquery UI datepicker sample site. It gives the ability to select a data range. I added the line "minDate: 0" that disables all dates before today. I want to combine this with a function (2) that I found at Stack Overflow. It disables an array of dates from the calendar.

I tried to combine these scripts but it I cannot make it all work together (select date range, disables dates before today and disables array of dates). Help would be very much appreciated.

(1) Code from jquery UI datepicker sample site. This pen has a working sample.

$(function() {
    $( "#from" ).datepicker({
      minDate: 0,
      changeMonth: true,
      numberOfMonths: 2,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      minDate: 0,
      changeMonth: true,
      numberOfMonths: 2,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });


<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>

<body>

<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">


</body>

(2) Script that disables certain dates (link) (see also this fiddle)

var array = ["2013-03-14","2013-03-15","2013-03-16"]

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

Is this [Fiddle](http://jsfiddle.net/pz2s746h/) what you want? — sb9, Nov 25 '14 at 10:02
This is exactly what i want. Thank you so much. I tried mixing the code like this but must have overlooked something (lack of skills but working on it). — Ixillion, Nov 25 '14 at 10:31

score 0 · Answer 1 · answered Nov 25 '14 at 10:34

Just combine those options like this:

var array = ["2014-12-14","2014-12-15","2014-12-16"];

$( "#from" ).datepicker({
      minDate: 0,
      changeMonth: true,
      numberOfMonths: 2,
      beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
      },
      onClose: function( selectedDate ) {
          if (selectedDate) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
          }
      }
   });
$( "#to" ).datepicker({
      minDate: 0,
      changeMonth: true,
      numberOfMonths: 2,
      beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
      },
      onClose: function( selectedDate ) {
          if (selectedDate) {
             $( "#from ").datepicker( "option", "maxDate", selectedDate);
          }
      }
  });

Jquery UI datepicker combining functions

1 Answers1