Develop Reference

How to disable particular date in datepicker in jquery

I want to disable some dates in datepicker..When user selects particular date dropdown displays of available mass of particular date.. Some dates dont have mass so those date has to be disabled. How can I disable those dates in datepicker. Here is the code
<script type="text/javascript">
function DisableDates(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [custDate.indexOf(string) == -1];
}
$(function() {
var date = new Date();
var dayNo = date.getDay();
var d = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
var event = ['6.00 am : English', '7.00 am : Kannada', '8.00 am: Tamil'];
var event1 = ['7.00 am : Kannada', '9.00 am: English', '11.00 am: Tamil'];
var event2 = ['6.00 am : English', '7.00 am : Kannada'];
var event3 = ['No Masses Till 8th September'];
var custDate = ['2022-09-08'];
$("#datepicker").datepicker({
changeMonth: true,
dateFormat: 'yy-mm-dd',
beforeShowDay: DisableDates,
minDate: 0,
onSelect: function(dateText, inst) {
var today = new Date(dateText);
var a = (d[today.getDay()]);
$('#slDay').val(d[today.getDay()]);
var html = '';
$('#slDay').html('');
if (custDate.includes(dateText)) {
$.each(event3, function(index, value) {
html += '<option value="' + value + '">' + value + '</option>'
});
}
else if (custDate1.includes(dateText)) {
$.each(event2, function(index, value) {
html += '<option value="' + value + '">' + value + '</option>'
});
}
else if (d[today.getDay()] == 'sun') {
$.each(event1, function(index, value) {
html += '<option value="' + value + '">' + value + '</option>'
});
}
else {
$.each(event, function(index, value) {
html += '<option value="' + value + '">' + value + '</option>'
});
}
$('#slDay').append(html);
}
});
});
</script>

Jquery UI DatePicker Restrict Set Of Date

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.

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

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

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

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

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

How to show selected dates in Highlight using Jquery

$(document).ready(function(){
$('#datepicker').datepicker({
dateFormat: 'mm/dd/yy',
onSelect: function() {
$("#getDate").click(function () {
var start = $("#datepicker").datepicker("getDate"),
currentDate = new Date(start),
between = [];
for(var i=0;i<7;i++) {
currentDate.setTime(currentDate.getTime() + 24*60*60*1000);
//miliseconds in 1 day
between.push(new Date(currentDate));
}
for (var i = 0; i < between.length; i++) {
var date = $.datepicker.formatDate('mm/dd/yy', new Date(between[i]));
between[i] = date;
$('#datepicker').datepicker({
beforeShowDay: function(date) {
var Highlight = between[i];
if (Highlight) {
return [true, "Highlighted", Highlight];
}
else {
return [true, '', ''];
}
}
});
}
$.getJSON('http://localhost:10039/wps/wcm/myconnect/SampleWork/SampleWork_SA/?srv=cmpnt&source=library&cmpntname=CalendarMenu', function (data) {
console.log("Length!!!" +data.length);
$.each( data, function( key, val ) {
console.log("Date!!!!!" +val.Date);
if(between[i] = val.Date){
console.log("In If Block");
// console.log("EventName: " +val.EventName);
console.log("EventName!!!" +val.EventName);
$(".current").append("<table cellspacing='5' cellpadding='5'><tr><td>" + val.Time +" " + "</td><td>"+" " + val.EventName +" " + "</td><td>"+" " + val.EventDescription +"</td><td>" + '<img class="meeting" src="http://localhost:10039' + val.Image + '" alt="" />' +"</td></tr></table>");
}
});
});
console.log("Date : "+between);
//Here I am Getting : Date : 08/05/2014,08/06/2014,08/07/2014,08/08/2014,08/09/2014,08/10/2014,08/11/2014
})
}
});
});
css is :
.Highlighted a{
background-color : Green !important;
background-image :none !important;
color: White !important;
font-weight:bold !important;
font-size: 12pt;
}

You can change the class which is being used to select date that is 'ui-state-active' and then have your desired color and formatting over there
.ui-state-active {
background: red !important;
}
JSFiddle Demo
As per the comment here is the updated answer:
JSFiddle Demo
Code snippet:
var SelectedDates = {};
SelectedDates[new Date('08/08/2014')] = new Date('08/08/2014');
SelectedDates[new Date('08/09/2014')] = new Date('08/09/2014');
SelectedDates[new Date('08/10/2014')] = new Date('08/10/2014');
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var Highlight = SelectedDates[date];
if (Highlight) {
return [true, "Highlighted", Highlight];
}
else {
return [true, '', ''];
}
}
});
});

Stop jQuery Datepicker from refreshing when clicking previous/next month

I have the following problem: I'm using jQuery Datepicker so that a user can select flight dates. The only problem I am facing is that when a user selects the dates, and then clicks the top arrows to go to the previos or next months, then the dates(red colored) which the user selects, go back to the original. How can I fix this? Please help. I am providing a Fiddle: FIDDLE HERE
$(document).ready(function () {
var start_date = "2014-10-04";
var end_date = "2014-10-20";
var date1 = new Date(start_date);
var date2 = new Date(end_date);
var actual_end_date = new Date(end_date);
actual_end_date.setDate(actual_end_date.getDate() + 2);
var pre_nights = 1;
var post_nights = 2;
var msecPerDay = 24 * 60 * 60 * 1000;
date2.setDate(date2.getDate() + 1);
if (post_nights > 0) {
date2 = new Date(date2.getTime() + (msecPerDay * post_nights));
}
var flight_end = new Date(date2.getTime() + msecPerDay);
if (pre_nights > 0) {
date1 = new Date(date1.getTime() - (msecPerDay * pre_nights));
}
var post_night_dates_arr = [];
var pre_night_dates_arr = [];
function date_check() {
$(".ui-state-active").removeClass("ui-state-active");
$('.ui-datepicker-group').each(function () {
$(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function () {
var this_elem = $(this);
var this_date = new Date($(this).data('year') + "-" + ($(this).data('month') + 1) + "-" + $(this).text());
var this_end_date = new Date(this_date);
this_end_date.setDate(this_end_date.getDate() + 1);
var current_this_end_date = this_end_date.getFullYear() + "-" + (this_end_date.getMonth() + 1) + "-" + ("0" + this_end_date.getDate()).slice(-2);
var current_day = this_date.getFullYear() + "-" + (this_date.getMonth() + 1) + "-" + ("0" + this_date.getDate()).slice(-2);
if (pre_night_dates_arr.length > 0 || post_night_dates_arr.length > 0) {
$.each(pre_night_dates_arr, function (key, val) {
if (current_day === val) {
this_elem.addClass("extra_nights_color");
}
});
$.each(post_night_dates_arr, function (key, val) {
if (current_this_end_date === val) {
this_elem.addClass("extra_nights_color");
}
});
}
});
});
}
$("#datepicker").datepicker({
numberOfMonths: 2,
dateFormat: 'yy-mm-dd',
defaultDate: date1,
beforeShowDay: function (date) {
var current_day = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + ("0" + date.getDate()).slice(-2);
var flight_start = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + ("0" + date1.getDate()).slice(-2);
var flight_end_mod = flight_end.getFullYear() + "-" + (flight_end.getMonth() + 1) + "-" + ("0" + flight_end.getDate()).slice(-2);
if (current_day == flight_start) {
var arr = [true, "flight_dept_color"];
} else if (date > date1 && date < date2) {
if (pre_nights > 0) {
pre_night_dates_arr.push(current_day);
pre_nights--;
var arr = [true, "extra_nights_color"];
} else if (post_nights > 0) {
var flight_end_date = new Date(flight_end);
flight_end_date.setDate(flight_end_date.getDate() - post_nights);
var flight_end_date_mod = flight_end_date.getFullYear() + "-" + (flight_end_date.getMonth() + 1) + "-" + ("0" + flight_end_date.getDate()).slice(-2);
if (current_day == flight_end_date_mod) {
post_night_dates_arr.push(current_day);
post_nights--;
var arr = [true, "extra_nights_color"];
} else {
var arr = [true, "tour_dates_color"];
}
} else {
var arr = [true, "tour_dates_color"];
}
} else if (current_day == flight_end_mod) {
var arr = [true, "flight_return_color"];
} else {
var arr = [true, ""];
}
return arr;
},
onSelect: function (dateStr, inst) {
inst.inline = false;
date_check();
console.log("test");
$(".ui-datepicker-calendar tbody td:has(a)").each(function () {
var this_date = $(this).data('year') + "-" + ("0" + ($(this).data('month') + 1)).slice(-2) + "-" + ("0" + $(this).text()).slice(-2);
var date2_mod = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + ("0" + date2.getDate()).slice(-2);
if (pre_night_dates_arr.length > 0) {
if (this_date < pre_night_dates_arr[0]) {
if (this_date == dateStr) {
$(".ui-datepicker-calendar .flight_dept_color").removeClass("flight_dept_color");
$(this).addClass("flight_dept_color");
}
} else if (this_date > date2_mod) {
if (this_date == dateStr) {
$(".ui-datepicker-calendar .flight_return_color").removeClass("flight_return_color");
$(this).addClass("flight_return_color");
}
}
} else {
var flight_start = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + ("0" + date1.getDate()).slice(-2);
if (this_date <= flight_start) {
if (this_date == dateStr) {
$(".ui-datepicker-calendar .flight_dept_color").removeClass("flight_dept_color");
$(this).addClass("flight_dept_color");
}
} else if (this_date > date2_mod) {
if (this_date == dateStr) {
$(".ui-datepicker-calendar .flight_return_color").removeClass("flight_return_color");
$(this).addClass("flight_return_color");
}
}
}
});
}
});
date_check();
$('.ui-corner-all').on('click', function (e) {
date_check();
});
});

I came up with this solution. Thanks for whoever took the time to look over this. Let me know if you can re modify this code even better.
$(document).ready(function() {
var selected_dept_date = "";
var selected_return_date = "";
var actual_start_date = "2014-10-04";
var actual_end_date = "2014-10-20";
var actual_end_date_DATE = new Date(actual_end_date);
actual_end_date_DATE.setDate(actual_end_date_DATE.getDate() + 1);
var time = "T00:00:00";
var start_date = actual_start_date + time;
var end_date = actual_end_date + time;
var date1 = new Date(start_date);
var date2 = new Date(end_date);
var pre_nights = 5;
var post_nights = 2;
var pre_nights_count = pre_nights;
var post_nights_count = post_nights;
var msecPerDay = 24 * 60 * 60 * 1000;
date2.setDate(date2.getDate() + 1);
function getAllDays(d1, d2) {
var s = new Date(d1);
s.setHours(0, 0, 0, 0);
var e = new Date(d2);
e.setHours(0, 0, 0, 0);
var a = [];
while (s < e) {
a.push(s);
s = new Date(s.setDate(s.getDate() + 1));
}
return a;
}
var pre_night_dates_arr = [];
var post_night_dates_arr = [];
if (pre_nights > 0) {
date1 = new Date(date1.getTime() - (msecPerDay * pre_nights));
$.each(getAllDays(date1, date2), function(key, val) {
if (pre_nights_count > 0) {
pre_night_dates_arr.push(val);
pre_nights_count--;
} else {
return false;
}
});
}
if (post_nights > 0) {
date2 = new Date(date2.getTime() + (msecPerDay * post_nights));
$.each(getAllDays(date1, date2), function(key, val) {
if (post_nights_count > 0) {
if (val.getTime() > actual_end_date_DATE.getTime()) {
post_night_dates_arr.push(val);
post_nights_count--;
}
} else {
return false;
}
});
}
var start_date_after_settings = new Date(getAllDays(date1, date2)[0]);
start_date_after_settings.setDate(start_date_after_settings.getDate() - 1);
var end_date_after_settings = new Date($(getAllDays(date1, date2)).last()[0]);
end_date_after_settings.setDate(end_date_after_settings.getDate() + 1);
function load_tour_dates() {
$(".ui-state-active").removeClass("ui-state-active");
$('.ui-datepicker-group').each(function() {
$(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
var this_elem = $(this);
var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));
$.each(getAllDays(date1, date2), function(key, val) {
if (pre_night_dates_arr.length > 0) {
$.each(pre_night_dates_arr, function(key2, val2) {
if (this_date.getTime() == val2.getTime()) {
this_elem.addClass("extra_nights_color");
}
});
}
if (this_date.getTime() == val.getTime()) {
this_elem.addClass("tour_dates_color");
return false;
}
if (post_night_dates_arr.length > 0) {
$.each(post_night_dates_arr, function(key2, val2) {
if (this_date.getTime() == val2.getTime()) {
this_elem.addClass("extra_nights_color");
}
});
}
});
});
});
}
function load_selected_start_dates() {
$('.ui-datepicker-group').each(function() {
$(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
var this_elem = $(this);
var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));
if (selected_dept_date instanceof Date) {
if (this_date.getTime() == selected_dept_date.getTime()) {
this_elem.addClass("flight_dept_color");
}
} else {
if (this_date.getTime() == start_date_after_settings.getTime()) {
this_elem.addClass("flight_dept_color");
}
}
if (selected_return_date instanceof Date) {
if (this_date.getTime() == selected_return_date.getTime()) {
this_elem.addClass("flight_return_color");
}
} else {
if (this_date.getTime() == end_date_after_settings.getTime()) {
this_elem.addClass("flight_return_color");
}
}
});
});
}
function select_date(date) {
var curr_date_mod = new Date(date);
$('.ui-datepicker-group').each(function() {
$(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
var this_elem = $(this);
var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));
if (curr_date_mod.getTime() <= start_date_after_settings.getTime()) {
if (this_date.getTime() === curr_date_mod.getTime()) {
selected_dept_date = curr_date_mod;
$(".ui-datepicker-calendar .flight_dept_color").removeClass("flight_dept_color");
this_elem.addClass("flight_dept_color");
}
}
if (curr_date_mod.getTime() >= end_date_after_settings.getTime()) {
if (this_date.getTime() === curr_date_mod.getTime()) {
selected_return_date = curr_date_mod;
$(".ui-datepicker-calendar .flight_return_color").removeClass("flight_return_color");
this_elem.addClass("flight_return_color");
}
}
});
});
}
$("#datepicker").datepicker({
numberOfMonths: 2,
dateFormat: 'yy-mm-dd',
defaultDate: date1,
onSelect: function(dateStr, inst) {
inst.inline = false;
var curr_date = dateStr.replace("-", ",");
var curr_date_mod = new Date(curr_date);
select_date(curr_date_mod);
}
});
function must_runs() {
load_tour_dates();
load_selected_start_dates();
if (selected_dept_date instanceof Date) {
select_date(selected_dept_date);
}
if (selected_return_date instanceof Date) {
select_date(selected_dept_date);
}
}
must_runs();
$(document).delegate('.ui-datepicker-prev', 'click', function() {
must_runs();
});
$(document).delegate('.ui-datepicker-next', 'click', function() {
must_runs();
});
});