Develop Reference

Disable a day in a datepicker that is not in the list

I have a variable that will receive some data, specifically the day of the week and something else.
let wTime = [{"day":"Mon"},{"day":"Tue"},{"day":"Wed"},{"day":"Fri"},{"day":"Sat"},{"day":"Sun"}]
I also have a bootstrap datepicker, and in it I need to determine which day is not in the wTime variable and disable this day.
How can i do this? Specifically, there is no Th day right now, and for now I manually disable it using daysOfWeekDisabled: '4'
let wTime = [{"day":"Mon"},{"day":"Tue"},{"day":"Wed"},{"day":"Fri"},{"day":"Sat"},{"day":"Sun"}]
let restaurantReserve = {
init: function() {
let _self = this;
let today = new Date().toLocaleString('en-us',{day:'numeric', month:'short'}).split(' ').reverse().join(' ');
$('#reservation-date').datepicker({
startDate: '+0d',
daysOfWeekDisabled: '4'
}).on('changeDate', function(e) {
const arDate = e.date.toString().split(' ');
let input = $('[name="RestaurantReservationForm[date]"]');
input.val(arDate[3] + '-' + (e.date.getMonth() + 1) + '-' + arDate[2]);
_self.unSetError(input);
$('#reservation-date .js-value').text(arDate[2] + ' ' + arDate[1]);
});
$("#reservation-date").datepicker("setDate", today);
},
setError: function(ob) {
$('#' + ob.data('btnId')).addClass('btn-error');
},
unSetError: function(ob) {
$('#' + ob.data('btnId')).removeClass('btn-error');
}
}
restaurantReserve.init();
.btn {
border: none;
border-radius: 8px;
padding: 10px 15px;
font-weight: 800;
font-size: 14px;
cursor: pointer;
}
.btn-fourth {
text-decoration: none;
background: #e3e5e8;
color: #747b8b;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<a class="btn btn-fourth " id="reservation-date" data-date=">">
<span class="icon br-calender"></span> <span class="js-value">click</span>
</a>

Why not make a day checker? If you want to dynamically get rid of a day, simply check to see which day is missing and set that to your daysOfWeekDisabled:
You could do something like this:
let wTime = [{"day":"Tue"},{"day":"Fri"},{"day":"Sat"},{"day":"Sun"}]
let dayCheck = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
let dayNumbers = ''
let disabledDays = dayCheck.filter(y => wTime.map(x => x['day']).every(x => x !== y)).forEach(y => dayNumbers += dayCheck.indexOf(y))
console.log(dayNumbers.split('').join(', '))
EDIT: One issue that has not been clarified is where is the user interacting with wTime. As in, how are you getting the user interaction to decide which day should be omitted? This solution is assuming wTime is somehow being modified through a user interaction. If that part is already decided, then this should work. If you need help with actually setting wTime up to be accessible to user engagement, then we'll need more code.
Full code would look like this:
let wTime = [{"day":"Tue"},{"day":"Fri"},{"day":"Sat"},{"day":"Sun"}]
let dayCheck = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
let dayNumbers = ''
let disabledDays = dayCheck.filter(y => wTime.map(x => x['day']).every(x => x !== y)).forEach(y => dayNumbers += dayCheck.indexOf(y))
let restaurantReserve = {
init: function() {
let _self = this;
let today = new Date().toLocaleString('en-us',{day:'numeric', month:'short'}).split(' ').reverse().join(' ');
$('#reservation-date').datepicker({
startDate: '+0d',
daysOfWeekDisabled: dayNumbers.split('').join(', ')
}).on('changeDate', function(e) {
const arDate = e.date.toString().split(' ');
let input = $('[name="RestaurantReservationForm[date]"]');
input.val(arDate[3] + '-' + (e.date.getMonth() + 1) + '-' + arDate[2]);
_self.unSetError(input);
$('#reservation-date .js-value').text(arDate[2] + ' ' + arDate[1]);
});
$("#reservation-date").datepicker("setDate", today);
},
setError: function(ob) {
$('#' + ob.data('btnId')).addClass('btn-error');
},
unSetError: function(ob) {
$('#' + ob.data('btnId')).removeClass('btn-error');
}
}
restaurantReserve.init();

Enhancing your current function with an Enum that gives us each day correlating to a number. Then simply filter that enum with the wTime array to find the missing days and disable them.
let wTime = [{"day":"Mon"},{"day":"Tue"},{"day":"Wed"},{"day":"Fri"},{"day":"Sat"},{"day":"Sun"}]
let wTimeEnum = {'Mon':'1', 'Tue':'2', 'Wed':'3','Thur':'4', 'Fri':'5', 'Sat':'6', 'Sun':'0'};
let restaurantReserve = {
init: function() {
let _self = this;
let today = new Date().toLocaleString('en-us',{day:'numeric', month:'short'}).split(' ').reverse().join(' ');
$('#reservation-date').datepicker({
startDate: '+0d',
daysOfWeekDisabled: Object.keys(wTimeEnum).filter((k) => wTime.every((d) => d.day != k)).map((k) => wTimeEnum[k])
//daysOfWeekDisabled: ['4']
}).on('changeDate', function(e) {
const arDate = e.date.toString().split(' ');
let input = $('[name="RestaurantReservationForm[date]"]');
input.val(arDate[3] + '-' + (e.date.getMonth() + 1) + '-' + arDate[2]);
_self.unSetError(input);
$('#reservation-date .js-value').text(arDate[2] + ' ' + arDate[1]);
});
$("#reservation-date").datepicker("setDate", today);
},
setError: function(ob) {
$('#' + ob.data('btnId')).addClass('btn-error');
},
unSetError: function(ob) {
$('#' + ob.data('btnId')).removeClass('btn-error');
}
}
restaurantReserve.init();
.btn {
border: none;
border-radius: 8px;
padding: 10px 15px;
font-weight: 800;
font-size: 14px;
cursor: pointer;
}
.btn-fourth {
text-decoration: none;
background: #e3e5e8;
color: #747b8b;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<a class="btn btn-fourth " id="reservation-date" data-date=">">
<span class="icon br-calender"></span> <span class="js-value">click</span>
</a>

Appending a class to a javascript calendar given the data (clndr.js)

I am looking to assign a class to each clndr.js event that appears in my calendar based on the value itself. var temp shows an example of the data received. I want to the style each event on type being 1 or 2. The code shows the default template which I want to modify to simply add in the value passed in type as a class so I can then style it.
link to the source library on github
link to a similar problem on github
// This is the default calendar template. This can be overridden.
var clndrTemplate =
"<div class='clndr-controls'>" +
"<div class='clndr-control-button'>" +
"<span class='clndr-previous-button'>previous</span>" +
"</div>" +
"<div class='month'><%= month %> <%= year %></div>" +
"<div class='clndr-control-button rightalign'>" +
"<span class='clndr-next-button'>next</span>" +
"</div>" +
"</div>" +
"<table class='clndr-table' border='0' cellspacing='0' cellpadding='0'>" +
"<thead>" +
"<tr class='header-days'>" +
"<% for(var i = 0; i < daysOfTheWeek.length; i++) { %>" +
"<td class='header-day'><%= daysOfTheWeek[i] %></td>" +
"<% } %>" +
"</tr>" +
"</thead>" +
"<tbody>" +
"<% for(var i = 0; i < numberOfRows; i++){ %>" +
"<tr>" +
"<% for(var j = 0; j < 7; j++){ %>" +
"<% var d = j + i * 7; %>" +
"<td class='<%= days[d].classes %>'>" +
"<div class='day-contents <%= days[d].type %>'><%= days[d].day %></div>" +
"</td>" +
"<% } %>" +
"</tr>" +
"<% } %>" +
"</tbody>" +
"</table>";
var calendars = {};
$(document).ready(function () {
var thisMonth = moment().format('YYYY-MM');
var eventArray = {{ data|tojson }};
var temp = [{
date: thisMonth + '-22',
type: 1
}, {
date: thisMonth + '-27',
type: 2
}, {
date: thisMonth + '-13',
type: 1
}];
calendars.clndr1 = $('.cal1').clndr({
events: eventArray,
targets: {
day: 'day',
},
clickEvents: {
click: function (target) {
console.log('Cal-1 clicked: ', target);
},
today: function () {
console.log('Cal-1 today');
},
nextMonth: function () {
console.log('Cal-1 next month');
},
previousMonth: function () {
console.log('Cal-1 previous month');
},
onMonthChange: function () {
console.log('Cal-1 month changed');
},
nextYear: function () {
console.log('Cal-1 next year');
},
previousYear: function () {
console.log('Cal-1 previous year');
},
onYearChange: function () {
console.log('Cal-1 year changed');
},
nextInterval: function () {
console.log('Cal-1 next interval');
},
previousInterval: function () {
console.log('Cal-1 previous interval');
},
onIntervalChange: function () {
console.log('Cal-1 interval changed');
}
},
multiDayEvents: {
singleDay: 'date',
endDate: 'endDate',
startDate: 'startDate'
},
showAdjacentMonths: true,
adjacentDaysChangeMonth: false
});
// Bind all clndrs to the left and right arrow keys
$(document).keydown(function (e) {
// Left arrow
if (e.keyCode == 37) {
calendars.clndr1.back();
calendars.clndr2.back();
calendars.clndr3.back();
}
// Right arrow
if (e.keyCode == 39) {
calendars.clndr1.forward();
calendars.clndr2.forward();
calendars.clndr3.forward();
}
});
});

I don't know your code, so I'm working with the test of CLNDR from github - folder "tests".
Add at the bottom of test.js (basically just make sure it's after clndr activation)
var thisMonth = moment().format('YYYY-MM');
var temp = [{
date: thisMonth + '-22',
type: 1
}, {
date: thisMonth + '-27',
type: 2
}, {
date: thisMonth + '-13',
type: 1
}];
for (event of temp) {
$('.calendar-day-' + event.date).addClass('ev-type-' + event.type);
};
Then add some css styles to test.html <head> just to clearly see it's working
.ev-type-1 {
background: #F00 !important;
color: #fff !important;
}
.ev-type-2 {
background: #0F0 !important;
color: #fff !important;
}

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

jQuery DatePicker does not render beforeShowDay after initialization

I am working on a booking system for a hotel. I want the booking system to be like the one on acehotel.com. Mine works, but when I click on "Uitcheck dag" (day of checking out) it does not show the day of checking in. Here is a link to my page: http://webdesign.kam-online.net/DatePicker/
$(document).ready(function() {
var dates = [];
var dateArray = [];
currentDate = new Date();
var tips = ['some description','some other description'];
$("#aantallen").hide();
$("#datepicker").hide();
$("#datepicker2").hide();
$("#AantalMensen").click(function(){
$("#datepicker2").hide();
$("#datepicker").hide();
$("#aantallen").show();
});
$("#IncheckDag").click(function(){
$("#datepicker2").hide();
$("#aantallen").hide();
$("#datepicker").show();
});
$("#UitcheckDag").click(function(){
$("#datepicker").hide();
$("#aantallen").hide();
$("#datepicker2").show();
});
Date.prototype.addDays = function(days) {
var dat = new Date(this.valueOf())
dat.setDate(dat.getDate() + days);
return dat;
}
function getDates(startDate, stopDate) {
var currentDate = startDate;
while (currentDate <= stopDate) {
dateArray.push( new Date (currentDate) );
currentDate = currentDate.addDays(1);
}
return dateArray;
}
$('#datepicker').datepicker({
dateFormat: 'mm/dd/yy',
beforeShowDay: highlightDays,
showOtherMonths: true,
onSelect: function () {
var pickedDate = $("#datepicker").datepicker("getDate");
if (pickedDate > currentDate) {
dates.push(pickedDate);
dateArray.push(pickedDate);
alert(dates[0]);
} else {
alert("Error");
}
}
});
$("#datepicker2").datepicker({
dateFormat: 'mm/dd/yy',
beforeShowDay: highlightDays,
showOtherMonths: true,
onSelect: function () {
var pickedSecondDate = $("#datepicker2").datepicker("getDate");
if (pickedSecondDate > dates[0])
{
dates.push(pickedSecondDate);
alert(dates[1]);
var start = dates[0];
var end = dates[1];
getDates(start, end);
} else {
alert("Error");
}
}
});
function highlightDays(date) {
for (var i = 0; i < dateArray.length; i++) {
if (new Date(dateArray[i]).toString() == date.toString()) {
return [true, 'highlight', tips[i]];
}
}
return [true, ''];
}
});

It is throwing an error in the below code snippet in your HTML( Function searchRoom())
document.getElementById("Result").innerHTML = "Aantal Volwassenen " + volwassenen + "<br>\
Aantal Kinderen " + kinderen + "<br>\
Incheck Datum " + checkinDate + "<br>\
Uitcheck Datum " + checkoutDate + "<br
it is not properly ended.
document.getElementById("Result").innerHTML = "Aantal Volwassenen " + volwassenen + "<br>\
Aantal Kinderen " + kinderen + "<br>\
Incheck Datum " + checkinDate + "<br>\
Uitcheck Datum " + checkoutDate + "<br>";
Try this once

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