datePicker in jQuery UI not working - javascript

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

Related

jQuery Datepicker UI Tooltip

Is it possible to add tooltip only to the disabled dates in jQuery datepicker?
$(function() {
$('#datepicker').datepicker({
minDate : 0,
maxDate : +30,
beforeShowDay: function(date) {
return [true, 'highlight', 'The custom title'];
}
});
});
My code puts the tooltip to all dates.
Yes. It is possible. Check the below link to know more on disabling date.
http://api.jqueryui.com/datepicker/#option-beforeShowDay
Below is the code
var disabledDates = ["11-2-2016","19-2-2016","28-2-2016"];
function disableDate(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, disabledDates) < 0) {
return [true,"",""];
} else {
return [false,"","This is disabled"];
}
}
$('.datePicker').datepicker({ beforeShowDay: disableDate });
Demo : https://jsfiddle.net/j2caztgu/

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

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 onchangemonthyear beforeshowday

I have the datepicker on a modal of twitter bootstrap.
in order to highlight some dates, the datepicker is generated in the 'success'-part as an ajax-call.
I manage to highlight the dates I want to highlight in the current month, which is fine.
But when I toggle to the previous or next month, I would like to make that ajax-call again and render dates to highlight. Below you can see my code:
function nonValidated() {
var date = new Date();
date.addDays(-date.getDate() + 1);
var startDate = [date.getDate().lpad(2), (date.getMonth() + 1).lpad(2), date.getFullYear()].join('/');
var enddate = new Date();
enddate.setDate(date.getDaysInMonth());
var endDate = [enddate.getDate().lpad(2), (enddate.getMonth() + 1).lpad(2), enddate.getFullYear()].join('/');
var depId = $('#serviceSelector').val();
$.ajax({
type: "POST",
url: "/ServiceManagement/GetUnassignedSlots",
data: { "from": startDate, "to": endDate, "depId": depId },
success: function (data) {
$.datepicker.setDefaults(
$.extend(
{ 'dateFormat': 'dd/mm/yy' },
$.datepicker.regional['nl-BE']
)
);
$("#nonValidatedDatepicker").datepicker(
{
inline: true,
beforeShowDay: function (date) {
var theday = date.getDate() + '/' +
(date.getMonth() + 1).lpad(2) + '/' +
date.getFullYear();
return [true, $.inArray(theday, data.result) >= 0 ? "warningDate" : ''];
},
onSelect: function (dateText, inst) {
var dateParts = dateText.split('/');
if (dateParts[0][0] == '0') dateParts[0] = dateParts[0][1];
if (dateParts[1][0] == '0') dateParts[1] = dateParts[1][1];
var newdate = new Date(dateParts[2], dateParts[0]-1, dateParts[1]);
var dayOfWeek = newdate.getDay();
if (dayOfWeek == 0) dayOfWeek = 7;
var weekstart = new Date(newdate.getFullYear(), newdate.getMonth(), newdate.getDate());
weekstart.addDays(-dayOfWeek + 1);
var weekend = new Date(newdate.getFullYear(), newdate.getMonth(), newdate.getDate());
weekend.addDays(7 - dayOfWeek);
$('#SelectWeekDate').val([weekstart.getDate().lpad(2), (weekstart.getMonth() + 1).lpad(2), weekstart.getFullYear()].join('/') + ' - ' + [weekend.getDate().lpad(2), (weekend.getMonth() + 1).lpad(2), weekend.getFullYear()].join('/'));
$('#modalNonValidated').modal('hide');
InitFillPage();
},
onChangeMonthYear: function (year, month, widget) {
}
}
);
},
error: function (data) {
},
statusCode: {
401: function (data) {
//ERROR 401: Unauthenticated
window.location.href = '/Account/Login?ReturnUrl=' + encodeURIComponent(window.location.pathname);
}
}
});
}
anyone an idea how I can combine onchangemonthyear and beforeshowday?
I would split the code that shows the datepicker and the code that makes the ajax call to get the data for the datepicker (the data that determines which days to highlight) into 2 separate functions. You can call the function that makes the ajax call from the function that first shows the datepicker, and again from your onChangeMonthYear function. Also, make sure that the ajax call to get the data is made synchronously (set async: false option) so that the data comes back before your beforeShowDay function runs.
Hope that helps!

Categories

Resources