Harsimran singh
Harsimran singh

Reputation: 95

Need help in jquery date picker

Hello every one I am facing one issue in date picker please help me in it friends.

I am using this code for date picker.

$("#datepicker").datepicker({minDate: 0});

This code is making all previous dates disable that is correct and what I need. Now I need is.

Suppose date is 02/05/2016 and from this date I need next 2 dates to be disable no one can select those dates. 02/06/2016 , 02/07/2016

I tried it using Min Max function and date 02/05/2016 come dynamically using my code.

Please help me in it friends.

Upvotes: 0

Views: 58

Answers (2)

Rayon
Rayon

Reputation: 36609

Use beforeShowDay, A function that takes a date as a parameter and must return an array with true/false indicating whether or not this date is selectable, CSS class name to add to the date's cell or "" for the default presentation, optional popup tooltip for this date

Try this:

var date = new Date();
var array = [];
var numberOfDays = 2;
for (var i = 0; i < numberOfDays; i++) {
  date.setDate(date.getDate() + 1);
  var formattedDate = jQuery.datepicker.formatDate('mm/dd/yy', date);
  array.push(formattedDate);
}
$('#date').datepicker({
  minDate: 0,
  beforeShowDay: function(date) {
    var string = jQuery.datepicker.formatDate('mm/dd/yy', date);
    return [array.indexOf(string) == -1]
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" rel="stylesheet" />

<input id='date' />

Upvotes: 0

Amit Shah
Amit Shah

Reputation: 1380

You can disable the date specifically like this.

/** Days to be disabled as an array */
var badDates = ["02-06-2015", "02-07-2014"];

function DisableSpecificDates(date) {
    var string = $.datepicker.formatDate('mm-dd-yy', date);
    return [badDates.indexOf(string) == -1];
  }

$(function() {
  $("#datepicker").datepicker({
    minDate: 0,
    beforeShowDay: DisableSpecificDates
  });
});

Whatever date you will add to badDates array will get disabled.

Thanks Amit

Upvotes: 0

Related Questions