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: stackoverflow.com/questions/15400775/…

Indrasinh Bihola
– Indrasinh Bihola

2015-10-05 12:58:53 +00:00
Commented Oct 5, 2015 at 12:58 — Indrasinh Bihola
– Indrasinh Bihola, Commented Oct 5, 2015 at 12:58
Try reading davidwalsh.name/jquery-datepicker-disable-days

user1399844
– user1399844

2015-10-05 13:00:29 +00:00
Commented Oct 5, 2015 at 13:00 — user1399844
– user1399844, Commented Oct 5, 2015 at 13:00

Rahul Tripathi · Accepted Answer · 2015-10-05 13:02:57Z

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 5, 2015 at 13:02

Rahul Tripathi

173k33 gold badges292 silver badges341 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user4695698 · Accepted Answer · 2015-10-05 13:17:43Z

1

$(".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

answered Oct 5, 2015 at 13:17

user4695698

Comments

Insane Skull · Accepted Answer · 2015-10-05 13:03:19Z

0

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
});

});

answered Oct 5, 2015 at 13:03

Insane Skull

9,3619 gold badges49 silver badges66 bronze badges

Comments

Sylvain · Accepted Answer · 2015-10-05 13:33:43Z

0

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
  });
 });

answered Oct 5, 2015 at 13:33

Sylvain

1291 silver badge8 bronze badges

Collectives™ on Stack Overflow

Jquery UI DatePicker Restrict Set Of Date

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related