Jquery UI DatePicker Restrict Set Of Date

Question

I am working on Jquery-UI Datepicker for hotel domain project. Basically hotel have some of Packages/Offers that are not valid on some of date durations. This durations are coming from database. Between these date user can't select date for booking from Jquery-UI Calendar. I don't know how to implement this.

$(".calendar").datepicker({
    dateFormat: 'dd/mm/yy',
    minDate:0
});
/* an array of days which are not applicable for packages/offers Booking */
var disabledDays = ["10-25-2015","10-26-2015","10-27-2015","10-28-2015","11-3-2015","11-4-2015","11-5-2015","11-20-2015","11-21-2015","11-22-2015","12-12-2015","12-13-2015"];

/* utility functions */
function getBookedDays(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();
    //
}

http://jsfiddle.net/ANJYR/34yfb2zs/1/

When calendar open user can't select date from 25 Oct 2015 To 28 Oct 2015 as so on dates.

Try this: http://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates — Indrasinh Bihola, Oct 05 '15 at 12:58
Try reading http://davidwalsh.name/jquery-datepicker-disable-days — , Oct 05 '15 at 13:00

score 1 · Accepted Answer · answered Oct 05 '15 at 13:02

1

You can try like this:

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

JSFIDDLE DEMO

answered Oct 05 '15 at 13:02

Rahul Tripathi

168,305
31
280
331

score 1 · Answer 2 · answered Oct 05 '15 at 13:17

$(".calendar").datepicker({
    dateFormat: 'dd/mm/yy',
    minDate:0,
    beforeShowDay: getBookedDays
});
/* an array of days which are not applicable for packages/offers Booking */
var disabledDays = ["10-25-2015","10-26-2015","10-27-2015","10-28-2015","11-3-2015","11-4-2015","11-5-2015","11-20-2015","11-21-2015","11-22-2015","12-12-2015","12-13-2015"];

/* utility functions */


function getBookedDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}

DEMO

score 0 · Answer 3 · answered Oct 05 '15 at 13:03

See demo example at: jsFiddle Example

var unavailableDates = ["28-10-2015", "29-10-2015", "27-10-2015"];

function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
    return [true, ""];
} else {
    return [false, "", "Unavailable"];
}
}

$(function() {
$("#iDate").datepicker({
    defaultDate: new Date("1-10-2015"),
    dateFormat: 'dd MM yy',
    beforeShowDay: unavailable
});

});

score 0 · Answer 4 · answered Oct 05 '15 at 13:33

Try this:

var disableddates = ["28-10-2015", "29-10-2015", "27-10-2015"];

function DisableSpecificDates(date) {

 var m = date.getMonth();
 var d = date.getDate();
 var y = date.getFullYear();

 var currentdate = (m + 1) + '-' + d + '-' + y ;

 for (var i = 0; i < disableddates.length; i++) {

 if ($.inArray(currentdate, disableddates) != -1 ) {
 return [false];
 }
 }

}

 $(function() {
  $( ".calendar" ).datepicker({
  beforeShowDay: DisableSpecificDates
  });
 });

Jquery UI DatePicker Restrict Set Of Date

4 Answers4