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.
Below i have a 2 datepicker which user have to select them and then
the 2nd datepicker will change the min date according to datepicker1
but my goal is to set the 3rd date in datepicker1 and set 7th date in
datepicker 2 without selecting them(Auto).
So far i can able to display the first datepicker with last available
day(3rd date) while i still can't achieve the dates for 2nd
datepicker(7th) :(
Any suggestion?
Here's the code
$(document).ready(function() {
var array = ["15-01-2020","18-01-2020"];
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);
}
$('#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('').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 + date_diff + extra;
})
(7)
});
});
$( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100);
});
<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 href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
Note
The first datepicker min date is from tomorrow and maxdate is 3 days
which exclude holidays and sundays while the 2nd datepicker mindate is
based on 1st datepicker date and maxdate is 7 days which exclude
holidays and sundays. I just want the last 3rd and 7th date display in
the datepicker input without selecting them.Both input should not
available for choosing(Read-Only).
Updated: At first, I thought there was a bug with the answer code(I didn't really look at it) I provided you from the previous answer. But after looking through the old code again, I realized there isn't a bug with the old code since the datepicker class get remove every time the date picker object get initialize. Thus, I updated this answer to reflect that.
For this code, it is similar to the other code I gave you. It just that when it come to datepicker in a division it is different. However, I commented that into code. For the third datepicker, I compose that datepicker when the first maxDate function run for the first datepicker, then against when the second date picker function maxDate function is run. Since you don't want the user to do anything with the third datepicker, except seeing it, I used a division instead of an input field as a place holder for the third datepicker. They can still select the date but it will not do anything. You probably can add style to those dates to make it seem their selected and unselected states are the same. Also, tool tips can be added.
For this answer, I also give you two versions. The second version is better optimized and more flexible. Version 1 and 2 are the same code. Nonetheless, the second version assign the jQuery object of the 3 datepickers to 3 variables so that every time those divisions is needed to be used, it does not cause jQuery to look up those division objects again. Also, it is easier for you to change their naming context from one place.
Try to play around selecting the first day and you will see the days will dynamically change. Also, if you refer to any of my answer and find any bugs with in them, feel free to notify me of the bugs in the comment. Thank you.
Version 1:
<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 = ["15-01-2020","18-01-2020"];
// Store date for datepicker3 here
var dp3 = [];
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);
}
function dp2ini () {
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);
/*
* For an input field, the hasDatepicker class have to removed
* for the options to take effect if re-initialize. This, can
* also be done with the destroy option of datepicker
* $('#datepicker2').datepicker("destroy"). However, it seem,
* removing its class is faster in this case.
*
* On the other hand if a datepicker widget is a part
* or a division, it has to be destroy as the html
* for the widget is placed as html content inside that division,
* and simply just removing the hasDatepicker class from that division
* will cause the reinitializer to write in a second datepicker widget.
*
* In a division where it only contained the picker
* object, it is faster to just set the HTML to blank
* and remove the hasDatepicker class. On the otherhand,
* for more complicated division, it is better to use,
* the destroy option from "datepicker".
*/
$('#datepicker2').val('').removeClass("hasDatepicker");
$('#datepicker2').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++;
}
}
dp3[1] = new Date();
dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra );
dp3[1] = dp3[1].toDateString();
// Destroy dp3 and re-initalize it.
//$('#datepicker3').datepicker("destroy");
$('#datepicker3').empty();
$('#datepicker3').removeClass("hasDatepicker");
$( "#datepicker3" ).datepicker({
maxDate: max + date_diff + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]
|| date.toDateString() == dp3[1]
];
}
});
return max + date_diff + extra;
})(7)
});
}
$('#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++;
}
}
/* Initialize datepicker 3 here. */
// NOTE: If dp1 needed to be reinitialize dp3
// also have to be destroyed and reinitialize.
// The last day will always be a pick-able one...
// Because if it wasn't another day would had been added to it.
dp3[0] = new Date();
dp3[0].setDate( dp3[0].getDate() + max + extra );
dp3[0] = dp3[0].toDateString();
$( "#datepicker3" ).datepicker({
maxDate: max + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]];
}
});
return max + extra;
})
(3)
});
$( "#datepicker1" ).change(dp2ini);
// Also trigger the change event.
$( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change");
});
</script>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
<div id="datepicker3"></div>
Version 2:
<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 = ["15-01-2020","18-01-2020"];
// Store date for datepicker3 here
var dp3 = [];
var datepicker1 = $('#datepicker1')
datepicker2 = $('#datepicker2'),
datepicker3 = $('#datepicker3');
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);
}
function dp2ini () {
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);
/*
* For an input field, the hasDatepicker class have to removed
* for the options to take effect if re-initialize. This, can
* also be done with the destroy option of datepicker
* $('#datepicker2').datepicker("destroy"). However, it seem,
* removing its class is faster in this case.
*
* On the other hand if a datepicker widget is a part
* or a division, it has to be destroy as the html
* for the widget is placed as html content inside that division,
* and simply just removing the hasDatepicker class from that division
* will cause the reinitializer to write in a second datepicker widget.
*
* In a division where it only contained the picker
* object, it is faster to just set the HTML to blank
* and remove the hasDatepicker class. On the otherhand,
* for more complicated division, it is better to use,
* the destroy option from "datepicker".
*/
datepicker2.val('').removeClass("hasDatepicker");
datepicker2.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++;
}
}
dp3[1] = new Date();
dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra );
dp3[1] = dp3[1].toDateString();
// Destroy dp3 and re-initalize it.
//$('#datepicker3').datepicker("destroy");
datepicker3.empty();
datepicker3.removeClass("hasDatepicker");
datepicker3.datepicker({
maxDate: max + date_diff + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]
|| date.toDateString() == dp3[1]
];
}
});
return max + date_diff + extra;
})(7)
});
}
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++;
}
}
/* Initialize datepicker 3 here. */
// NOTE: If dp1 needed to be reinitialize dp3
// also have to be destroyed and reinitialize.
// The last day will always be a pick-able one...
// Because if it wasn't another day would had been added to it.
dp3[0] = new Date();
dp3[0].setDate( dp3[0].getDate() + max + extra );
dp3[0] = dp3[0].toDateString();
datepicker3.datepicker({
maxDate: max + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]];
}
});
return max + extra;
})
(3)
});
datepicker1.change(dp2ini);
// Also trigger the change event.
datepicker1.datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change");
});
</script>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
<div id="datepicker3"></div>
So I have a date picker which only allows 2 dates per month to be selected, the 1st and the 15th. The problem is it still allows previous dates to be picked. For example, if its the 1st of October all previous dates shouldn't be able to be selected. How can I make it so all previous dates cannot be selected?
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="side-datepicker">
$('#side-datepicker').datepicker({
beforeShowDay: function (date) {
//getDate() returns the day (0-31)
if (date.getDate() == 1 || date.getDate() == 15) {
return [true, ''];
}
return [false, ''];
},
});
$('#side-datepicker').datepicker({
beforeShowDay: function (date) {
let today = new Date('2019-10-24');
//if you want the current date to be selectable uncomment the following line
//today.setDate(today.getDate() -1);
if (date > today && (date.getDate() == 1 || date.getDate() == 15)) {
return [true, ''];
}
return [false, ''];
}
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="side-datepicker">
You are going to want to use the min date options to enforce a bottom on the date picker like so:
var currentTime = new Date()
var minDate = new Date(currentTime.getFullYear(), currentTime.getMonth(), +1); //first day of current month
$('#side-datepicker').datepicker({
minDate: minDate,
beforeShowDay: function (date) {
//getDate() returns the day (0-31)
if (date.getDate() == 1 || date.getDate() == 15) {
return [true, ''];
}
return [false, ''];
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="side-datepicker">
If you want to restrict it to just the current month and days that have not passed. Example only allow 1st and 15 but today is Oct 25th (past the 1st and 15) so the first available date to pick would be Nov 1st then you would mod your min date as follows:
var minDate = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate()); //current date
ex:
var currentTime = new Date()
var minDate = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate()); //current date
$('#side-datepicker').datepicker({
minDate: minDate,
beforeShowDay: function (date) {
//getDate() returns the day (0-31)
if (date.getDate() == 1 || date.getDate() == 15) {
return [true, ''];
}
return [false, ''];
},
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="side-datepicker">
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
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/