6Jquery datepicker date blocking not working? - javascript

I have written code to block past dates and dates in the unavilabledates array, but only the second element of the array is blocked, rest are available for selection. Any idea how to figure it out?
var unavailableDates = ["6-3-2016", "5-28-2016", "5-27-2016", "6-28-2016"];
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').datepicker({
onRender:function(date){
dmy = (date.getMonth() + 1) + "-" +date.getDate() + "-" + date.getFullYear();
return (date.valueOf() < now.valueOf() || ($.inArray(dmy, unavailableDates) == 1))?'disabled':'';
}
}
Output:// 5-28-2016 blocked , rest are not

I presume you use the jQuery UI Datepicker, use the beforeShowDay function instead of the onRender:
var unavailableDates = ["2016-03-06"]; // Dates formatted the same way as the beforeShowDay formatDate() function requires it
$('#dpd1').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ unavailableDates.indexOf(string) == -1 ]
},
minDate: 0
});
EDIT
I found the error, the formatDate('yy-mm-dd') in the beforeShowDay function checks for a 2016-05-25 date, while your provided array has dates like 6-3-2016. This is way the dates are not disabled.
See the updated code and a jsfiddle to go with it: https://jsfiddle.net/orttL83d/ (In this example I disabled 26th of May and all past dates)

Related

JS Datepicker: Disable past dates + specific days of the week + specific dates

I have a datepicker in JS where I disabled passed dates AND only allow saturdays like this:
$(document).ready(function(){
$("#aankomstdatum").datepicker({
dateFormat: "dd-mm-yy",
numberOfMonths:2,
minDate: 0,
beforeShowDay: function(date){
var day = date.getDay();
return [day == 6];
}});
});
I also have a code that lets me disable specific dates like this:
/** Days to be disabled as an array */
var disableddates = ["26-05-2018"];
function DisableSpecificDates(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
// First convert the date in to the mm-dd-yyyy format
// Take note that we will increment the month count by 1
var currentdate = (m + 1) + '-' + d + '-' + y ;
// We will now check if the date belongs to disableddates array
for (var i = 0; i < disableddates.length; i++) {
// Now check if the current date is in disabled dates array.
if ($.inArray(currentdate, disableddates) != -1 ) {
return [false];
}
}
}
With adding this, it works:
beforeShowDay: DisableSpecificDates
The issue I have is that i can't make both work. I'm not sure How can disable the past dates and all days except saturdays AND also disable specific given dates in the array, while seperatly they do work. I always get syntax errors when trying for example:
beforeShowDay: DisableSpecificDates, function(date){
var day = date.getDay();
return [day == 6];
}});
Is this possible to do?
Yes, it's possible to achieve this. You want to create one function and return [false] from it if:
date is a Saturday or
date is contained within disableddates array
Here's the example:
var disableddates = ["26-04-2018"];
function DisableDates(date) {
var selectable = !isSaturday(date) && !isDateDisabled(date);
return [selectable];
}
function isSaturday(date) {
var day = date.getDay();
return day === 6;
}
function isDateDisabled(date) {
var m = date.getMonth() + 1;
var d = date.getDate();
var y = date.getFullYear();
// First convert the date in to the dd-mm-yyyy format
if(d < 10) d = '0' + d;
if(m < 10) m = '0' + m;
var currentdate = d + '-' + m + '-' + y;
// Check if disableddates array contains the currentdate
return disableddates.indexOf(currentdate) >= 0;
}
And then just pass DisableDates function as the value of your beforeShowDay option:
$("#aankomstdatum").datepicker({
dateFormat: "dd-mm-yy",
numberOfMonths:2,
minDate: 0,
beforeShowDay: DisableDates
});

date object doesn't seem to be accurate when compared to today's date

I have this function that takes todays date and compares it to two weeks out. when it's less than or equal to the current date, it's supposed to add a class. However if it's today's date, it's not working. Otherwise it's working fine. Any ideas? Thanks
publicMethods.campaignEndDateAlert = function (dateString) {
if (!dateString) {
return dateString
};
var currentDate = new Date ();
var twoWeeks = new Date ();
twoWeeks.setDate(currentDate.getDate() + 14);
var inputDate = new Date(dateString);
// This is the part that doesn't seem to work - the first part of this if statement
if ((inputDate >= currentDate) && (inputDate <= twoWeeks)) {
dateString = '<span class="red">' + ax.Utils.RFCFormat(dateString, { excludeTime: true }) + '</span>';
} else {
dateString = ax.Utils.RFCFormat(dateString, { excludeTime: true })
};
return dateString;
};
Due to the information you provided:
You said that if it is today's date it doesn't work as expected. That is because new Date() will provide a date object with today's date and time. IF the value of dateString is something like "07-13-2017" without the time, you will need to strip the time out of the currentDate object if you expect inputDate >= currentDate to be true. Try using currentDate.setHours(0, 0, 0, 0); before comparing to inputDate.

Jquery datepicker reducing one day from selected epoch time

I have two Jquery datepickers namely "startDate" and "endDate". I initialize them like this.
$(function() {
$("#startdate").datepicker({ dateFormat: 'yy-mm-dd' });
$("#enddate").datepicker({ dateFormat: 'yy-mm-dd' });
});
Now i convert this date to epoch by doing this.
var sDate = startdate.split('-');
var eDate = enddate.split('-');
var sepoch = new Date(sDate[0], sDate[1] - 1, sDate[2]).getTime() / 1000;
var eepoch = new Date(eDate[0], eDate[1] - 1, eDate[2]).getTime() / 1000;
startdate = sepoch.toString();
enddate = eepoch.toString();
Now when i check the dates after converting them back from epoch, they differ by one day. So one day has been reduced from them. I can't figure out where i am going wrong. Please help me out here.
Please have a look at the fiddle, I have added a bit of code and I am getting the date that I chose from the datepicker
FIDDLE
$("#startdate").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(date) {
DoStuff();
}
});
function DoStuff() {
var startdate = $("#startdate").val();
var sDate = startdate.split('-');
var sepoch = new Date(sDate[0], sDate[1] - 1, sDate[2]).getTime() / 1000;
var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
d.setUTCSeconds(sepoch);
console.log(sDate[2]);
console.log(d);
}

Restrict Sundays between date range - jQuery Datepicker

I have a jQuery datepicker and I need to do the following:
Disable all Sundays between a specific date range
I understand I need to use the beforeShowDay function but cannot seem to get it in place using the other answers and examples on Stack Overflow.
Any help would be great.
Dan
If it's a static set of sundays, you can simply use an array with the dates you want to disable [taken from Jquery UI datepicker. Disable array of Dates ]:
var array = ["2013-03-14","2013-03-15","2013-03-16"]
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
If you want to make a dynamic set of sundays, you'll have to create a function to get an array of Sundays from a start date and an end date.
Here is a function to do exactly that:
function addSundaysToArray(fromDate, toDate, datesToDisable){
fromDate = new Date(fromDate);
toDate = new Date(toDate);
while(fromDate < toDate){
fromDate.setDate(fromDate.getDate() + 1);
if(fromDate.getDay() === 0){
var year = fromDate.getFullYear();
var month = fromDate.getMonth() + 1;
month = (month + '').length == 1 ? '0' + month : month;
var day = fromDate.getDate();
day = (day + '').length == 1 ? '0' + day : day;
datesToDisable.push(year + "-" + month + "-" + day);
}
}
}
Obviously you can use actual date objects here or even milliseconds. Or you can skip the array input to the function and just return an array with the dates.
I chose to represent the dates as yyyy-mm-dd since most of the times humans read these arrays and it's better to have them readable. Of course, if readability is not that important to you, you can just keep the dates in whatever format you prefer.

Exclude beforeShowDay when determining minDate

I'm using beforeShowDay to exclude holidays and weekends, however I want the beforeShowDays to be excluded when calculating the minDate.
E.g. if the current day of the week is friday and the minDate is 2, I want the weekend to be excluded from the equation. So instead of monday being the first date you can select, I want it to be wednesday.
This is my jQuery:
$( "#date" ).datepicker({
minDate: 2, maxDate: "+12M", // Date range
beforeShowDay: nonWorkingDates
});
Does anyone know how to do this?
How about something like this:
function includeDate(date) {
return date.getDay() !== 6 && date.getDay() !== 0;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
$("#date").datepicker({
beforeShowDay: function(date) {
return [includeDate(date)];
},
minDate: (function(min) {
var today = new Date();
var nextAvailable = getTomorrow(today);
var count = 0;
var newMin = 0; // Modified 'min' value
while(count < min) {
if (includeDate(nextAvailable)) {
count++;
}
newMin++; // Increase the new minimum
nextAvailable = getTomorrow(nextAvailable);
}
return newMin;
})(2) // Supply with the default minimum value.
});
Basically, figure out where the next valid date is, leveraging the method you've already defined for beforeShowDay. If my logic is correct (and you're only excluding weekends), this value can only be either 2 or 4: 2 If there are weekends in the way (Thurs. or Friday) and 2 if not.
It gets more complicated if you have other days you're excluding, but I think the logic still follows.
Here's the code on fiddle: http://jsfiddle.net/TpSLC/

Categories