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
});
});
Related
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>
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
});
});
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
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);
};
This following code disables some dates and highlights some others in the jQuery DatePicker UI.
var disabledDays = ["2013-12-14", "2014-1-21", "2014-1-24", "2011-7-27", "2014-1-28"];
var date = new Date();
jQuery(document).ready(function () {
$(".dp").datepicker({
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
beforeShowDay: function (date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray(y + '-' + (m + 1) + '-' + d, disabledDays) != -1) {
return [true, 'ui-state-active', ''];
}
}
return [false];
}
});
});
How can I implement the same code in a JavaScript?
SlickGrid DatePicker found here :
slickgrid datepicker example