We Keep Coding

DatePicker works for current year 2020 and previous year 2019 but available dates for next year 2021 are not available

I use DatePicker to limit the selection to the first and third Wednesday of each month. It is working for 2019 and 2020 but not 2021. I think it has something to do with the computer date which is todays date but I cannot change that to see if I am correct.
I am using the following code which is working for 2019 and 2020 but not 2021.
Please help.
<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.9.1.js"></script><script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="/resources/demos/style.css" rel="stylesheet">
<script>
$(document).ready(function() {
var availableDates = ["6-3-2019","20-3-2019","3-4-2019","17-4-2019","1-5-2019","15-5-2019","5-6-2019","19-6-2019","3-7-2019","17-7-2019","7-8-2019","21-8-2019","4-9-2019","18-9-2019","2-10-2019","16-10-2019","6-11-2019","20-11-2019","4-12-2019","18-12-2019","1-1-2020","15-1-2020","5-2-2020","19-2-2020","4-3-2020","18-3-2020","1-4-2020","15-4-2020","6-5-2020","20-5-2020","3-6-2020","17-6-2020","1-7-2020","15-7-2020","5-8-2020","19-8-2020","2-9-2020","16-9-2020","7-10-2020","21-10-2020","4-11-2020","18-11-2020","2-12-2020","16-12-2020","06-01-2021","20-01-2021","03-02-2021","17-02-2021","03-03-2021","17-03-2021","07-04-2021","21-04-2021","05-05-2021","19-05-2021","02-06-2021","16-06-2021","07-07-2021","21-07-2021","04-08-2021","18-08-2021","01-09-2021","15-09-2021","06-10-2021","20-10-2021","03-11-2021","17-11-2021","01-12-2021","15-12-2021"];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) != -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
$('#datepicker5').datepicker({ beforeShowDay: available,
maxDate: '+1Y'});
});

Jquery ui datepicker preselect date that is not a sunday

I have modified the jquery ui datepicker to pre-select the day that is 2 days from now and I have also disabled Sundays in the datepicker. However, the input field is still being pre-filled with the Sunday if the Sunday is 2 days from now. How do I prevent this?
$(function() {
$("#delivery-date").datepicker({
minDate: +2,
maxDate: '+2M',
dateFormat: "DD, d MM yy",
showOn: "both",
buttonText: "Change",
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0), ''];
}
}).datepicker("setDate", "0");
});

Assuming you would switch to the Next day, Monday, you can use conditional (ternary) operator.
Here is an example.
$(function() {
$("#delivery-date").datepicker({
minDate: new Date().getDay() + 2 == 7 ? 3 : 2,
maxDate: '+2M',
dateFormat: "DD, d MM yy",
showOn: "both",
buttonText: "Change",
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0), ''];
}
}).datepicker("setDate", "0");
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="delivery-date"></p>
If today is Friday (5), adding 2 days, would make it Sunday of the next week (7, or in JS: 0). So we can check for that.
Normally we might make a function:
function pickDay(n){
var d = new Date().getDay(); // Returns the day of the week: 5
if(d + n == 7){
return n + 1;
}
return n;
}
and then use it like so:
minDate: pickDay(2),
I tested this and it's not liked, there seems to be some timing issue.

How to enable one day randomly per week in jQuery datepicker

Currently I am showing only next 60 days in datepicker. I am trying to enable only one day randomly per week. I do not know how to do it.
$( "#visit" ).datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
maxDate:60
});
http://jsfiddle.net/4zb2frxt/2/

You can write custom function to disable all dates except one day in a week,
and code below
$(function(){
$("#visit").datepicker({
beforeShowDay: available,
minDate: 0,
maxDate:60
});
//get random value to select date
var random = Math.floor(Math.random() * 5) + 4;
//console.log(random);
function available(date) {
var day = date.getDay();
//disable weekends
if(day==6 || day==0) {
return [false,"","unAvailable"];
}
var dt = date.getDate();
if (dt % random ==0) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
});
<link rel="stylesheet" type="text/css" href="http://davidwalsh.name/dw-content/jquery-ui-css/custom-theme/jquery-ui-1.7.2.custom.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<input type='text' id='visit' />

Disable button if input date is lesser than 4 months

I want to disable the next button when the input date is lesser than 4 months. Get the current date and check if the current date is lesser than 4 months. If it's lesser disable the next button and give an alert.
I tried it with an alert button to test the datepicker, but that didn't work:
jQuery(document).ready(function($) {
$('#input_18_104').datepicker({
onSelect: function() {
var date = $(this).datepicker('getDate');
var today = new Date();
if ((new Date(today.getFullYear(), today.getMonth(), today.getDate() + 120)) < date) {
//Do somthing here..
alert(123);
}
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />
<input name="input_104" id="input_18_104" type="text" class="datepicker medium mdy datepicker_no_icon hasDatepicker" tabindex="72" placeholder="Date?"> Next button:
<input type="button" id="next_button_18_94" class="form_next_button button" value="Next" tabindex="76">

Your actual condition is wrong today.getDate()+120 will give you a number higher than 120 which will lead to a wrong date then your comparison won't be always correct.
You need to compare the month values respectively, this is how you could do it:
$(document).ready(function () {
$('#input_18_104').datepicker()
.on("input change", function (e) {
var date = $(this).datepicker('getDate');
var today = new Date();
if ((today.getMonth() + 11) - (date.getMonth() + 11) > 4) {
alert("The date is wrong");
} else if (((today.getMonth() + 11) - (date.getMonth() + 11) == 4) && (today.getDate() > date.getDate())) {
alert("The date is wrong");
} else {
console.log("Date is fine");
}
});
});
Explanataion:
We used date.getMonth() + 11 to make sure we don't get a negative
value, so we added 11 to the 2 months values, so it won't affect
the test.
Then we check if the difference between these two values isn't higher than 4, so the choosen date is fine.
Demo:
$(document).ready(function() {
$('#input_18_104').datepicker()
.on("input change", function(e) {
var date = $(this).datepicker('getDate');
var today = new Date();
if ((today.getMonth() + 11) - (date.getMonth() + 11) > 4) {
alert("The date is wrong");
} else if (((today.getMonth() + 11) - (date.getMonth() + 11) == 4) && (today.getDate() > date.getDate())) {
alert("The date is wrong");
} else {
console.log("Date is fine");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />
<input name="input_104" id="input_18_104" type="text" class="datepicker medium mdy datepicker_no_icon hasDatepicker" tabindex="72" placeholder="Date?"> Next button:
<input type="button" id="next_button_18_94" class="form_next_button button" value="Next" tabindex="76">

The following approach will work
jQuery(document).ready(function($) {
$("#input_18_104").datepicker({
dateFormat: 'dd/mm/yy'}).on("changeDate", function (e) {
alert("Working");});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />
<input name="input_104" id="input_18_104" type="text" class="datepicker medium mdy datepicker_no_icon hasDatepicker" tabindex="72" placeholder="Date?"> Next button:
<input type="button" id="next_button_18_94" class="form_next_button button" value="Next" tabindex="76">

That is not too difficult.
new Date returns a timestamp in milliseconds. The date function is pretty smart. You can overflow the months and days and it will correct it to the date: so a value of 14 as month will actually become February or March. But you really want to stay away from day calculation or subtracting months because of leap years, 30 and 31 day count etc. Comparing time stamps is safer.
new Date(date)
Just add 4 months:
//remember month is zero based, so correct with +1 to give correct date input.
future = new Date(today.getFullyear()+"-"+(today.getMonth()+1+4)+"-"+today.getDate())
Now compare:
future < new Date(date);
When the selected date is bigger than the future 4 month date it will be more than 4 months.
Under the hood JavaScript compares timestamps which are counted in milliseconds from 1970-01-01 so whenever a timestamp is bigger than another it is in the future relative to the compared timestamp.

I would compare the dates based on their time values. That's not 100% accurate because not all months have 30 days, but ok. Here's a quick try
jQuery(document).ready(function ($) {
$('#input_18_104').datepicker({
onSelect: function(){
var date = $(this).datepicker('getDate');
var today = new Date();
var threshold = 10368000000; // 120d in ms = 4*30*24*60*60*1000
var d = today.getTime()-date.getTime();
//console.log(d, d > threshold)
// be optimistic...
$('#next_button_18_94').attr('disabled', false);
if (d < 0) {
// selected date is in the future => everything ok
return;
}
if (d > threshold) {
// oops, selected date more than 4 months in the past
$('#next_button_18_94').attr('disabled', true);
return;
}
},
});
});
#next_button_18_94[disabled]{
border: 2px solid red;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input name="input_104" id="input_18_104" type="text" tabindex="72" >
<input type="button" id="next_button_18_94" class="form_next_button button" value="Next" tabindex="76">

Assuming that "lesser than 4 months" mean means the input date is less than 4 months before today, then a simple method is to add 4 months to the input date and see if it's less than today, then enable or disable the button as required, e.g.
function checkDate(input) {
var form = input.form;
var now = new Date();
var then = parseDate(input.value);
addMonths(then, 4);
form.actionButton.disabled = now > then;
}
function parseDate(s) {
var b = s.split(/\D/)
return new Date(b[0], b[1]-1, b[2]);
}
function addMonths(date, months) {
var d = date.getDate();
date.setMonth(date.getMonth() + +months);
if (date.getDate() != d) date.setDate(0);
return date;
}
<form>
Date (yyyy-mm-dd)<input type="text" value="2017-01-01" name="date" onblur="checkDate(this)"><br>
<input type="button" name="actionButton" onclick="console.log(this.form.date.value)" value="Do stuff" disabled>

Use monthDiff function
jQuery(document).ready(function ($) {
$('#input_18_104').datepicker({
onSelect: function () {
var date = $(this).datepicker('getDate');
var today = new Date();
if (monthDiff(today, date) < 4) {
//Do somthing here..
alert(123);
}
},
});
});
function monthDiff(d1, d2) {
var months;
months = (d2.getFullYear() - d1.getFullYear()) * 12;
months -= d1.getMonth() + 1;
months += d2.getMonth();
return months <= 0 ? 0 : months;
}

In JQuery Date picker need to disable alternate weeks in a month

Hi I am working with JQuery Datepicker, I want to disable alternate weeks.
I tried with beforeShowDay but that doesn't help for alternate weeks,
$("#datepicker").datepicker({
beforeShowDay: function(date) {
return date.getDay() == 6
}
});
Can any one help me on this please

We can use the getWeekNumber() function shown in this answer to return the week of the year.
With this, we can do weekNumber % 2 == 0 to restrict it to alternating weeks.
Date.prototype.getWeekNumber = function() {
var d = new Date(+this);
d.setHours(0, 0, 0, 0);
d.setDate(d.getDate() + 4 - (d.getDay() || 7));
return Math.ceil((((d - new Date(d.getFullYear(), 0, 1)) / 8.64e7) + 1) / 7);
};
$("#datepicker").datepicker({
beforeShowDay: function(date) {
return [date.getWeekNumber() % 2 == 0, '']
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="datepicker">
Note, the expected return of beforeShowDay is an array:
A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date