Develop Reference

How to disable both certain days of the week and some specific dates in jquery DatePicker?

I'm trying to diable specific days of the week and some specific dates using a script, and echoing the dates from the database with php, this is what I came to so far
<script>
$(function() {
var unavailableDates = ["1-1-2022"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#datepicker").datepicker({
dateFormat: 'dd MM yy',
minDate: 0,
beforeShowDay: unavailable
});
});
});
$("#datepicker").datepicker(
{ beforeShowDay: function(day) {
var day = day.getDay();
if (day == 0 || day == 1) {
return [false, "somecssclass"]
} else {
return [true, "someothercssclass"]
}
}
});
</script>

how to disable unavilable dates dynamically in datepicker

I'm trying to disable unaviable dates dynamically how can i do this ?
if i give static value like below its working fine
var unavailableDates = ["10-8-2015","24-7-2015","10-7-2015","09-8-2015","09-7-2015","01-12-2015","01-1-2016","11-8-2015"];
if i get this value dynamically its not working how can i solve this ?
My Fiddle
var unavailableDates = $('#DesignIdUnavialble').html();
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("7-7-2015"),
minDate:0,
dateFormat: 'dd-mm-yy',
beforeShowDay: unavailable
});
});
Whats wrong in my code.Anybody help me ?

Try this Working Demo
Just change the date format like m/d/Y
$(document).ready(function(){
var Desingndate = $('#DesignIdUnavialble').html();
var splitdate = Desingndate.split(',');
// console.log(splitdate.length);
var arrDisabledDates = {};
for (var i = 0; i < splitdate.length; i++) {
//console.log(splitdate[i]);
arrDisabledDates[new Date(splitdate[i])] = new Date(splitdate[i]);
}
$("#iDate").datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay: function (dt) {
var bDisable = arrDisabledDates[dt];
if (bDisable) return [false, '', ''];
else return [true, '', ''];
}
});
});

Here you go , as mentioned in my comment, updated code below.
Updated fiddle - Working Fiddle
var unavailableDates =$('#DesignIdUnavialble').html().replace(/\"/g,'').split(",");
console.log(unavailableDates);
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("3-3-2015"),
dateFormat: 'dd MM yy',
beforeShowDay: unavailable
});
});

beforeShowDay in bootstrap datepicker disables the next date

I have mulitple datepickers on a page, once I select one I want to disable it from the next datepicker. I have used the below code.
jQuery('.date-picker', jForm).datepicker({
startDate: new Date(),
autoclose: true,
todayHighlight: true,
beforeShowDay:function(Date){
var curr_date = Date.toJSON().substring(0,10);
if (forbidden.indexOf(curr_date)>-1) return false;
}
});
Forbidden is the array of selected dates, the above code disables the following day, not the selected one (example if I select 2015-06-04 it disables 2015-06-05).

Here I am not using bootstrap datepicker
DEMO
var unavailableDates = ["19-8-2015","14-8-2015"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();
if ($.inArray(dmy, unavailableDates) < 0) {
return [true,"","Book Now"];
} else {
return [false,"","Booked Out"];
}
}
$('#unvailable').datepicker({ beforeShowDay: unavailable });

datePicker in jQuery UI not working

I want to call the beforeShowDay function in jquery UI datepicker, but I found that the location
of beforeShowDay matters and I have no clue.
Code would help:
<script>
var datePickerOptions = {
minDate: 'today',
beforeShowDay: available
};
/*This is a function only let datePicker show the dates in dateList*/
var available = function(date){
window.console.log("in");
var dmy = (date.getMonth() + 1) + "-" + date.getDate() + "-" + date.getFullYear();
if($.inArray( dmy, dateList ) !== -1 ) {
return [true, "", "Available"];
}
else {
return [false, "", "unAvailable"];
}
};
var init = function(availableDates) {
$('.datePicker').datepicker(datePickerOptions);
};
</script>
If I write it in this way, the minDate would work, but the beforeShowDay wouldn't, the console didn't print 'in'.
But if I write it in this way:
var init = function(availableDates) {
$('.datePicker').datepicker({
minDate: 'today',
beforeShowDay: available
});
};
it would work.I don't see the real difference between these two methods, and I really want to use the first method.
Any ideas? Thanks.

It is because when available is used to create the datePickerOptions object it is not initialized with a value, so it has a value of undefined which is same as not passing the option in this case. You can move the creation of datePickerOptions after the available variable is initialized to fix the problem.
/*This is a function only let datePicker show the dates in dateList*/
var available = function(date){
window.console.log("in");
var dmy = (date.getMonth() + 1) + "-" + date.getDate() + "-" + date.getFullYear();
if($.inArray( dmy, dateList ) !== -1 ) {
return [true, "", "Available"];
}
else {
return [false, "", "unAvailable"];
}
};
var datePickerOptions = {
minDate: 'today',
beforeShowDay: available
};
var init = function(availableDates) {
$('.datePicker').datepicker(datePickerOptions);
};

Datepicker block selection of days, not disabling

Hi I have datepicker that i modify. I have a select range, days are available and not available, which the color changes depending the state. I use the functions beforeshowday and onSelect to do this and till here works excelent.
My problem comes that now I want to disable the selection of anyday, I mean I just want to show the user the days availables and not availables, the user can move trough the months and years, but he should not be able to click in a day.
I cant disable the day, I can't return false, this is not a solution, otherwise available days would look like not available.
This example is not mine but is similar, as you can see days not available have opacity, the days available are full color, so without lose this view, I want to not allow the user to click on any day available, but yes move between months and years clicking on the arrows.
http://jsfiddle.net/kVsbq/4/
$("#from").datepicker({
dateFormat: 'dd-mm-yy',
minDate: new Date(),
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
},
beforeShowDay: function (d) {
var dmy = (d.getMonth() + 1);
if (d.getMonth() < 9)
dmy = "0" + dmy;
dmy += "-";
if (d.getDate() < 10) dmy += "0";
dmy += d.getDate() + "-" + d.getFullYear();
console.log(dmy + ' : ' + ($.inArray(dmy, notAvailableDates)));
if ($.inArray(dmy, notAvailableDates) != -1) {
return [false, "", "Booked"];
} else {
return [true, "", "Book Now"];
}
}
});
$("#to").datepicker({
dateFormat: 'dd-mm-yy',
minDate: new Date(),
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
},
beforeShowDay: function (d) {
var dmy = (d.getMonth() + 1);
if (d.getMonth() < 9)
dmy = "0" + dmy;
dmy += "-";
if (d.getDate() < 10) dmy += "0";
dmy += d.getDate() + "-" + d.getFullYear();
console.log(dmy + ' : ' + ($.inArray(dmy, notAvailableDates)));
if ($.inArray(dmy, notAvailableDates) != -1) {
return [false, "", "Booked"];
} else {
return [true, "", "Book Now"];
}
}
});