JQuery UI Datepicker - MaxDate exclude disabled days - javascript

I am trying to exclude disabled dates when counting MaxDate.
I tried many ways but still doesn't work.
Any suggestion?
02-12-2019 and Sundays has been disabled but the Maxdate include the disabled date.
Maxdate should be 3 days which excludes disabled days and Maxdays starts by today.
My goal is to add days if the days between today until max days has disabled.
Add 1 day per disabled day
Update
Now i am able to Exclude sunday when counting maxdate but i still can't exclude the array date where it should add one more day after 02-12-2019.
Updated Code :(
<script>
var array = ["02-12-2019"]
//new
function includeDate(date) {
return date.getDay() !== 7 && date.getDay() !== 0;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
//prev
$('input').datepicker(
{
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
var isDisabled = ($.inArray(string, array) != -1);
return [includeDate(date) && !isDisabled];
},
maxDate: (function(max) {
var today = new Date();
var nextAvailable = getTomorrow(today);
var count = 0;
var countz = 1;
var newMax = 0;
while(count < max) {
if (includeDate(nextAvailable) ) {
count++;
}
if (includeDate(nextAvailable) ) {
countz++;
}
newMax++;
nextAvailable = getTomorrow(nextAvailable);
}
return newMax;
})
(3)
});
http://jsfiddle.net/3o1dmvw5/96/

This below should be the solution. The problem with your code is that you forgot to verify the date string to see if it is in the array or not using your includeDate() function. Thus, your includeDate() function allow that date, while maxDate didn't allow that date.
Also, you can also use array.indexOf() instead of jQuery's inArray. I am pretty sure that native array.indexOf() probably is faster.
Besides that, I modify your maxDate() function a little bit. It now look less confusing. I used window onload so that I can debug the code easy. You can just take that out.
For my version, when it come to verify the days, beforeShowDay and includeDate does the same thing. Thus, I edited beforeShowDay() to just return the value from the function includeDate().
Also, you should change the input selector to an ID(#) or Class(.). Otherwise, your datepicker will proc on all input fields.
Also, I modified you includeDate() function. There isn't a day 7 as 0 - 6 = Sunday - Saturday.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
var array = ["02-12-2019"]
//new
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
//prev
window.onload = function(){
$('input').datepicker(
{
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
// Next available is today at first.
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
/*
* Next available is here so that getTomorrow does not need
* to run an extra time when the loop is completed.
*
*/
nextAvailable = getTomorrow(nextAvailable);
// If the day is not available then we need to add an extra day.
if ( !includeDate(nextAvailable) ) {
extra++;
// Else we just increase the count.
} else {
count++;
}
}
// Return max + extra.
return max + extra;
})
(3)
});
};
</script>
<p>Date: <input type="text" id="datepicker"></p>

Related

Jquery UI Datepicker - Dependent Datepicker Exclude Holidays in Maxdate

I am trying to exclude Array Dates and Sundays in Dependent Datepicker.
The first datepicker works really well while the second datepicker doesn't exclude Array dates and sundays in Maxdate.
Second datepicker must selectable within 7 working days which should exclude Sunday and Array Dates.
I believe there's should be an easy way to achieve this.
Any Suggestion?
Here's the code :(
$(document).ready(function() {
var d = new Date();
var array = ["10-12-2019","05-12-2019"];
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
today = monthNames[d.getMonth()] + ' ' + d.getDate() + ' ' + d.getFullYear();
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
$('#datepicker2').attr('readonly', 'readonly');
$('#datepicker1').datepicker(
{
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + extra;
})
(3)
});
$('#datepicker1').change(function () {
var from = $('#datepicker1').datepicker('getDate');
var date_diff = Math.ceil((from.getTime() - Date.parse(today)) / 86400000);
var maxDate_d = date_diff + 7 +'d';
date_diff = date_diff + 'd';
$('#datepicker2').val('').removeAttr('readonly').removeClass('hasDatepicker').datepicker({
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: date_diff +1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = $('#datepicker1').datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + extra;
})
(7)
});
});
});
http://jsfiddle.net/nLveychs/83/
For your code, it is almost right. You just forgot one thing for the second date picker. That is, you did not add the date_diff value to the return value of the maxDate() anonymous function. I was going to pass the date_diff by adding it to the parameter. Nonetheless, I found a bug. It can't be done that way, because any previous un-selectable days, will turn into additional extra days. Thus, the only way to add date_diff is start from the day of date picker1 and add the return value of maxDate's anonymous function to date_diff.
I also took out some unnecessary codes. You can just get the date differences simply subtracting datepicker1 date to today date without needing to parse a date string. Plus, date_diff can be as was without needing a "d" to be added to it.
Also, take note that, when you calculate the different days between two dates, for your code, it work that way, because datepicker's date picked object is set to the 0 hour of the day. That code may not work for other scenario. The for sure way to get the day difference between two dates is by setting their hours, minutes, seconds, and milliseconds(if needed) to zeroes.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
var array = ["10-12-2019","05-12-2019"];
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
$('#datepicker2').attr('readonly', 'readonly');
$('#datepicker1').datepicker(
{
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + extra;
})
(3)
});
$('#datepicker1').change(function () {
var from = $('#datepicker1').datepicker('getDate');
// Date diff can be obtained like this without needing to parse a date string.
var date_diff = Math.ceil((from - new Date()) / 86400000);
$('#datepicker2').val('').removeAttr('readonly').removeClass('hasDatepicker').datepicker({
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: date_diff + 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = $('#datepicker1').datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
/*
* Date diffent have to be added to return value.
*/
return max + date_diff + extra;
})
(7)
});
});
});
</script>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>

enable previous dates of one week on date picker in jquery

i am trying to disable all the dates on datepicker except dates 7days before from current date but it disables all the dates. it works fine when i un-comment the commented code lines and comment the else part "return true" line.
but it disables the weekends too. so how can i achieve it without using noweekends(currentdate)
$(document).ready(function () {
$(function () {
{
var currentDate = new Date();
$("#StartDate").datepicker({ beforeShowDay: DisableSpecificDates });
$("#StartDate").datepicker({ dateFormat: 'yy-mm-dd' }).val();
$("#StartDate").datepicker("setDate", currentDate);
}
});
$(function () {
{
var currentDate = new Date();
$("#StartDte").datepicker({ beforeShowDay:DisableSpecificDates });
$("#StartDte").datepicker("setDate", currentDate);
}
});
function DisableSpecificDates(currentdate) {
//var weekenddate = $.datepicker.noWeekends(currentdate);
var difference;
var minDate = new Date();
var todaydate = new Date();
var d = todaydate.getDate();
var prevdays = 0;
difference = d - 6;
if (d <= prevdays && d > 0) {
minDate.setDate(difference);
}
else {
minDate.setDate(difference);
}
var datemin =new Date (minDate);
var day = todaydate.getDay();
switch (day)
{
case 0:
case 1:
prevdays = 4;
break;
case 2:
case 3:
case 4:
case 5:
prevdays = 2;
break;
case 6:
prevdays = 3;
break;
}
datemin.setDate(datemin.getDate()+1);
var dateOfMin = (minDate.getDate()) - prevdays - 1;
minDate.setDate(dateOfMin);
if (currentdate > todaydate || currentdate < minDate)
{
return false;
}
return true;
//return weekenddate;
}
Seems like you want to set date range as example below , so below will fix date range and also disable weekends
$( "#datepicker" ).
datepicker({ minDate: -20, maxDate: "+1M +10D", beforeShowDay: $.datepicker.noWeekends });
check datepicker : Date Range
or try like this
$('#date-time-picker').datepicker({
format: 'YYYY-MM-DD',
useCurrent: false,
showClose: true,
minDate: '2018-03-09',
maxDate: '2018-03-15',
beforeShowDay: $.datepicker.noWeekends
})
but here you need to give mindate and max date from script , for simplicity i hardcoded date

jquery ui datepicker add 6 months is wrong in edge cases

I'm using datepicker to set the end date to be 6 months after the start date. What I have is working except in edge cases. Example. If start date is 31-Mar-2014 then the end date should be 30-Sep-2014. However I get 01-Oct-2014. I've read about this being a known issue in other thread comments Here
and Here.
Is there something in JQuery or datepicker or an easy way that I can correct the date in edge cases like this?
There is likely an answer to this already but I haven't been able to scout it out. Any help would be greatly appreciated.
Here is the stripped down code and a demo I made that shows the example.
$("#StartDate").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "dd-M-yy",
onSelect: function () {
autoFillEndDate();
}
});
$("#EndDate").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "dd-M-yy"
});
function autoFillEndDate() {
if ($('#StartDate').val().length !== 0) {
var offset;
var offsetType;
var StartDate = $('#StartDate').datepicker('getDate');
var newDate = StartDate.setMonth(StartDate.getMonth() + 6);
var EndDT = $.datepicker.formatDate('dd-M-yy', new Date(newDate));
$('#EndDate').datepicker("setDate",EndDT);
}
}
Have you seen this answer ?
Updated your fiddle with that given function and it gets 30-sep:
http://jsfiddle.net/z3yshuzc/1/
function addMonths(dateObj, num) {
var currentMonth = dateObj.getMonth() + dateObj.getFullYear() * 12;
dateObj.setMonth(dateObj.getMonth() + num);
var diff = dateObj.getMonth() + dateObj.getFullYear() * 12 - currentMonth;
// If don't get the right number, set date to
// last day of previous month
if (diff != num) {
dateObj.setDate(0);
}
return dateObj;
}

jquery datepicker disable all dates accept one

Thank you for your help to people.
Look, I'm not a jQuery programmer and I stole alredy finished version of calendar, but still have something to change:
var enabledDays = ["6-1-2013", "7-1-2013", "8-1-2013", "9-1-2013", "10-1-2013", "11-1-2013"];
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1 || new Date() > date) {
return [true];
}
}
return [false];
}
$(function(){
$.datepicker.setDefaults($.extend($.datepicker.regional["ru"]));
$("#datepicker1, #datepicker2, #datepicker3").datepicker({dateFormat: "yy-mm-dd",
duration: "normal",
numberOfMonths: [ 1, 2 ],
constrainInput: true,
beforeShowDay: nationalDays});
});
This is regular datepicker which you can find all over in internet. I have var enabledDays which specifying the particulat month-date-year I need just set first date if each month in calendar activated and other disable. How can I do this guys. Thank you.
Does this plugin work for your needs?
http://multidatespickr.sourceforge.net/

Disable holiday, sundays and past dates inside jQuery UI datepicker

I'm in creating appointment form with jQuery datepicker. I've search around but seems that I can't combine all function I want in the beforeshowday.
What I want from the datepicker is disabled all date before today (yesterday and the rest of it because you can't make appointment at date before today it must be later), then disabled on every Sunday (its non working day) and public holiday (this one using array). What I saw from others is the jQuery are specifically for only one function like public holiday it just an array, but how about disabled previous day and sunday?
I tried to follow this articles http://articles.tutorboy.com/2010/09/03/jquery-ui-datepicker-disable-specified-dates/ but I don't know how to combine it. Can someone show me how?
I have this to disabled on every Sunday
function disabledSunday(date) {
var day = date.getDay();
return [(day != 0), ''];
}
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: disabledSunday
});
This one for alldates till today
var date = new Date();
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
// Disable all dates till today
$('#datepicker').datepicker({
minDate: new Date(y, m, d),
dateFormat: 'mm-dd-yy',
});
This one is for specific dates such as public holiday
// Disable a list of dates
var disabledDays = ["5-31-2013", "6-01-2013"];
function disableAllTheseDays(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];
}
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: disableAllTheseDays
});
How to combine these three function into one, I'm not much into Jquery and javascript
try this :-
html code :
<input id="txtDate" />
function disabledays(date) {
var ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
//if u have to disable a list of day
var removeDays = ["2013-6-11","2013-6-31" ];
if ($.inArray(ymd, removeDays) >= 0) {
return [false];
} else {
//Show accept sundays
var day = date.getDay();
return [(day == 1 || day == 2 || day == 3 || day == 4 ||day == 5 ||day == 6 )];
}
}
$(function () {
$('#txtDate').datepicker({
beforeShowDay: disabledays
});
});
Try this
$("#datepicker").datepicker({ minDate: 0 });
You can use minDate option to disable past dates. In addition, you can use beforeShowDay option to check the other two conditions**.
$("#datepicker").datepicker({
minDate: 0,
beforeShowDay: function (date) {
// it is possible to write the following function using one line
// of code; instead, multiple if/else are used for readability
var ok = true;
if (date.getDay() === 0) { // is sunday
ok = false;
} else {
var dateStr = $.datepicker.formatDate("m-dd-yy", date);
if ($.inArray(dateStr, disabledDays) >= 0) { // is holiday
ok = false;
}
}
return [ok, ""];
}
});
});
** Actually it is possible to check all three conditions in that function.
May u will find your slution here
http://jqueryui.com/datepicker/#min-max

Categories

Resources