Related
My code excludes dates, assigns a custom class and a title to the date field.
var holidays =[ [2020,06,17,'A Holiday'],[2020,06,18,'Another Holiday'],[2020,06,19,'Some Other Holiday'] ];
function setHolidays(date) {
for (i = 0; i < holidays.length; i++) {
if (date.getFullYear() == holidays[i][0]
&& date.getMonth() == holidays[i][1] - 1
&& date.getDate() == holidays[i][2]) {
return [false, 'holiday', holidays[i][3]];
}
}
return [true, ''];
}
$( ".add_delivery_date").datepicker( {
minDate: 0,
firstDay: 0,
beforeShowDay: setHolidays
} );
I know I can exclude weekends by using
beforeShowDay: $.datepicker.noWeekends
but I am unsure how to add it to the existing code.
You can simply pass noWeekends: true.
$( ".add_delivery_date").datepicker( {
noWeekends: true,
minDate: 0,
firstDay: 0,
beforeShowDay: setHolidays
} );
It was easier than I thought:
function setHolidays(date) {
for (i = 0; i < holidays.length; i++) {
if (date.getFullYear() == holidays[i][0]
&& date.getMonth() == holidays[i][1] - 1
&& date.getDate() == holidays[i][2]) {
return [false, 'holiday', holidays[i][3]];
}
}
var noWeekend = $.datepicker.noWeekends(date);
return !noWeekend[0] ? noWeekend : [true];
}
I use a datepicker for choosing an appointment day. I already set the date range to be only for the next month. That works fine. I want to exclude Saturdays and Sundays from the available choices. Can this be done? If so, how?
There is the beforeShowDay option, which takes a function to be called for each date, returning true if the date is allowed or false if it is not. From the docs:
beforeShowDay
The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable and 1 equal to a CSS class name(s) or '' for the default presentation. It is called for each day in the datepicker before is it displayed.
Display some national holidays in the datepicker.
$(".selector").datepicker({ beforeShowDay: nationalDays})
natDays = [
[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
[4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
[7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
[10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1
&& date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}
One built in function exists, called noWeekends, that prevents the selection of weekend days.
$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })
To combine the two, you could do something like (assuming the nationalDays function from above):
$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
Update: Note that as of jQuery UI 1.8.19, the beforeShowDay option also accepts an optional third paremeter, a popup tooltip
If you don't want the weekends to appear at all, simply:
CSS
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
The datepicker has this functionality built in!
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
http://api.jqueryui.com/datepicker/#utility-noWeekends
These answers were very helpful. Thank you.
My contribution below adds an array where multiple days can return false (we're closed every Tuesday, Wednesday and Thursday). And I bundled the specific dates plus years and the no-weekends functions.
If you want weekends off, add [Saturday], [Sunday] to the closedDays array.
$(document).ready(function(){
$("#datepicker").datepicker({
beforeShowDay: nonWorkingDates,
numberOfMonths: 1,
minDate: '05/01/09',
maxDate: '+2M',
firstDay: 1
});
function nonWorkingDates(date){
var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
var closedDates = [[7, 29, 2009], [8, 25, 2010]];
var closedDays = [[Monday], [Tuesday]];
for (var i = 0; i < closedDays.length; i++) {
if (day == closedDays[i][0]) {
return [false];
}
}
for (i = 0; i < closedDates.length; i++) {
if (date.getMonth() == closedDates[i][0] - 1 &&
date.getDate() == closedDates[i][1] &&
date.getFullYear() == closedDates[i][2]) {
return [false];
}
}
return [true];
}
});
The solution here that everyone likes seems to very intense... personally I think it's much easier to do something like this:
var holidays = ["12/24/2012", "12/25/2012", "1/1/2013",
"5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013",
"11/29/2013", "12/24/2013", "12/25/2013"];
$( "#requestShipDate" ).datepicker({
beforeShowDay: function(date){
show = true;
if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends
for (var i = 0; i < holidays.length; i++) {
if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays
}
var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip!
return display;
}
});
This way your dates are human readable. It's not really that different it just makes more sense to me this way.
You can use noWeekends function to disable the weekend selection
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
This version of code will make u to get the holiday dates from the sql database and disable the specified date in the UI Datepicker
$(document).ready(function (){
var holiDays = (function () {
var val = null;
$.ajax({
'async': false,
'global': false,
'url': 'getdate.php',
'success': function (data) {
val = data;
}
});
return val;
})();
var natDays = holiDays.split('');
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (var i = 0; i ‘ natDays.length-1; i++) {
var myDate = new Date(natDays[i]);
if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$("#shipdate").datepicker({
minDate: 0,
dateFormat: 'DD, d MM, yy',
beforeShowDay: noWeekendsOrHolidays,
showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true
});
});
});
Create a Database in sql and put you holiday dates in MM/DD/YYYY format as Varchar
Put the below contents in a file getdate.php
[php]
$sql="SELECT dates FROM holidaydates";
$result = mysql_query($sql);
$chkdate = $_POST['chkdate'];
$str='';
while($row = mysql_fetch_array($result))
{
$str .=$row[0].'';
}
echo $str;
[/php]
Happy Coding !!!! :-)
$("#selector").datepicker({ beforeShowDay: highlightDays });
...
var dates = [new Date("1/1/2011"), new Date("1/2/2011")];
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (date - dates[i] == 0) {
return [true,'', 'TOOLTIP'];
}
}
return [false];
}
In this version, month, day, and year determines which days to block on the calendar.
$(document).ready(function (){
var d = new Date();
var natDays = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]];
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (i = 0; i < natDays.length; i++) {
if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$(".datepicker").datepicker({
minDate: new Date(d.getFullYear(), 1 - 1, 1),
maxDate: new Date(d.getFullYear()+1, 11, 31),
hideIfNoPrevNext: true,
beforeShowDay: noWeekendsOrHolidays,
});
});
});
In the latest Bootstrap 3 version (bootstrap-datepicker.js) beforeShowDay expects a result in this format:
{ enabled: false, classes: "class-name", tooltip: "Holiday!" }
Alternatively, if you don't care about the CSS and tooltip then simply return a boolean false to make the date unselectable.
Also, there is no $.datepicker.noWeekends, so you need to do something along the lines of this:
var HOLIDAYS = { // Ontario, Canada holidays
2017: {
1: { 1: "New Year's Day"},
2: { 20: "Family Day" },
4: { 17: "Easter Monday" },
5: { 22: "Victoria Day" },
7: { 1: "Canada Day" },
8: { 7: "Civic Holiday" },
9: { 4: "Labour Day" },
10: { 9: "Thanksgiving" },
12: { 25: "Christmas", 26: "Boxing Day"}
}
};
function filterNonWorkingDays(date) {
// Is it a weekend?
if ([ 0, 6 ].indexOf(date.getDay()) >= 0)
return { enabled: false, classes: "weekend" };
// Is it a holiday?
var h = HOLIDAYS;
$.each(
[ date.getYear() + 1900, date.getMonth() + 1, date.getDate() ],
function (i, x) {
h = h[x];
if (typeof h === "undefined")
return false;
}
);
if (h)
return { enabled: false, classes: "holiday", tooltip: h };
// It's a regular work day.
return { enabled: true };
}
$("#datePicker").datepicker({ beforeShowDay: filterNonWorkingDays });
This work for me:
$( "#datepicker" ).datepicker({
beforeShowDay: function( date ) {
var day = date.getDay();
return [ ( day > 0 && day < 6 ), "" ];
}
});
For Saturday and Sunday You can do something like this
$('#orderdate').datepicker({
daysOfWeekDisabled: [0,6]
});
To Disable the Weekends the API has a built-in feature
$('#data_1 .input-group.date').datepicker({
daysOfWeekDisabled: [0,6],
});
0 = Sunday
6 = Sunday
I'm working on a project utilizing the jQuery datepicker, and am trying to use the showWeek attribute to display the week number next to the calender.
My problem is that I don't want 'week 1' to start on the first of January, but instead on the first of August.
Is there any way I can Implement this?
Thanks
working with the next month not working for prev month so i have disabled prev month.
calender always open with August month if current month less than August than calender start from previous year August.
Working Demo http://jsfiddle.net/cse_tushar/dR429/4
$(document).ready(function () {
i = 0;
month_set = 8;
var d = new Date();
week = (Math.ceil(Math.round(((new Date(d.getFullYear() + 1, 1)) - (new Date(d.getFullYear(), 1))) / 86400000) / 7));
current_year = ((d.getMonth() + 1) >= month_set) ? d.getFullYear() : d.getFullYear() - 1;
function myWeekCalc() {
i++;
return i = (i > week) ? 0 : i;
}
$("#d1").datepicker({
showWeek: true,
defaultDate: new Date(current_year, month_set-1, 1),
calculateWeek: myWeekCalc,
onClose: function () {
i = 0;
},
onChangeMonthYear: function (year, month) {
var diff = month - month_set;
var d = new Date(month + ' 1' + ',' + year);
if (d.getDay() != '0') {
i--;
}
if (month == month_set) {
i = 0;
}
if (current_year != year && month == month_set) {
week = (Math.ceil(Math.round(((new Date(year + 1, 1)) - (new Date(year, 1))) / 86400000) / 7));
}
}
}).focus(function () {
$(".ui-datepicker-prev").remove();
});
});
Using jQuery Date Picker custom Week of Year calculation and Moment library to calculate the week of year based on your locale.
Please refer to this working example:
https://jsfiddle.net/amansour/sez8fLgt/
function myWeekCalc(dt) {
var dat = moment(dt).locale("en-US");
return dat.week();
// return dat.isoweek(); // you will have to use firstDay : 1
}
$(function(){
$("[type='date']").datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 0, // 1 being Monday, 0 being Sunday, 6 being Friday
calculateWeek: myWeekCalc,
dateFormat: "yy-mm-dd",
yearRange: "-12:+12"
});
});
I have attempted to enable selection of only the first date of each month in a jQuery datepicker. The possible dates are listed in var enabledates.
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
});
});
How can I apply this first date constraint to the whole calendar?
If you just want to enable a range I would say you can use the Option properties minDate an maxDate.
Regarding your Problem to enable all Dates from an array. Please have a look at this fiddle http://jsfiddle.net/uYe9X/
function available(date) {
var dt= date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if (availableDates.indexOf(dt) !== -1) {
return [true, "","available"];
} else {
return [false,"","not available"];
}
}
As Pedro mentioned you could use the beforeShowDay Callback to reference a function which computes if the day should be enabled. The callback is used for every day which is displayed in the datepicker.
http://api.jqueryui.com/datepicker/#option-beforeShowDay
I use a datepicker for choosing an appointment day. I already set the date range to be only for the next month. That works fine. I want to exclude Saturdays and Sundays from the available choices. Can this be done? If so, how?
There is the beforeShowDay option, which takes a function to be called for each date, returning true if the date is allowed or false if it is not. From the docs:
beforeShowDay
The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable and 1 equal to a CSS class name(s) or '' for the default presentation. It is called for each day in the datepicker before is it displayed.
Display some national holidays in the datepicker.
$(".selector").datepicker({ beforeShowDay: nationalDays})
natDays = [
[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
[4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
[7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
[10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1
&& date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}
One built in function exists, called noWeekends, that prevents the selection of weekend days.
$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })
To combine the two, you could do something like (assuming the nationalDays function from above):
$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
Update: Note that as of jQuery UI 1.8.19, the beforeShowDay option also accepts an optional third paremeter, a popup tooltip
If you don't want the weekends to appear at all, simply:
CSS
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
The datepicker has this functionality built in!
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
http://api.jqueryui.com/datepicker/#utility-noWeekends
These answers were very helpful. Thank you.
My contribution below adds an array where multiple days can return false (we're closed every Tuesday, Wednesday and Thursday). And I bundled the specific dates plus years and the no-weekends functions.
If you want weekends off, add [Saturday], [Sunday] to the closedDays array.
$(document).ready(function(){
$("#datepicker").datepicker({
beforeShowDay: nonWorkingDates,
numberOfMonths: 1,
minDate: '05/01/09',
maxDate: '+2M',
firstDay: 1
});
function nonWorkingDates(date){
var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
var closedDates = [[7, 29, 2009], [8, 25, 2010]];
var closedDays = [[Monday], [Tuesday]];
for (var i = 0; i < closedDays.length; i++) {
if (day == closedDays[i][0]) {
return [false];
}
}
for (i = 0; i < closedDates.length; i++) {
if (date.getMonth() == closedDates[i][0] - 1 &&
date.getDate() == closedDates[i][1] &&
date.getFullYear() == closedDates[i][2]) {
return [false];
}
}
return [true];
}
});
The solution here that everyone likes seems to very intense... personally I think it's much easier to do something like this:
var holidays = ["12/24/2012", "12/25/2012", "1/1/2013",
"5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013",
"11/29/2013", "12/24/2013", "12/25/2013"];
$( "#requestShipDate" ).datepicker({
beforeShowDay: function(date){
show = true;
if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends
for (var i = 0; i < holidays.length; i++) {
if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays
}
var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip!
return display;
}
});
This way your dates are human readable. It's not really that different it just makes more sense to me this way.
You can use noWeekends function to disable the weekend selection
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
This version of code will make u to get the holiday dates from the sql database and disable the specified date in the UI Datepicker
$(document).ready(function (){
var holiDays = (function () {
var val = null;
$.ajax({
'async': false,
'global': false,
'url': 'getdate.php',
'success': function (data) {
val = data;
}
});
return val;
})();
var natDays = holiDays.split('');
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (var i = 0; i ‘ natDays.length-1; i++) {
var myDate = new Date(natDays[i]);
if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$("#shipdate").datepicker({
minDate: 0,
dateFormat: 'DD, d MM, yy',
beforeShowDay: noWeekendsOrHolidays,
showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true
});
});
});
Create a Database in sql and put you holiday dates in MM/DD/YYYY format as Varchar
Put the below contents in a file getdate.php
[php]
$sql="SELECT dates FROM holidaydates";
$result = mysql_query($sql);
$chkdate = $_POST['chkdate'];
$str='';
while($row = mysql_fetch_array($result))
{
$str .=$row[0].'';
}
echo $str;
[/php]
Happy Coding !!!! :-)
$("#selector").datepicker({ beforeShowDay: highlightDays });
...
var dates = [new Date("1/1/2011"), new Date("1/2/2011")];
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (date - dates[i] == 0) {
return [true,'', 'TOOLTIP'];
}
}
return [false];
}
In this version, month, day, and year determines which days to block on the calendar.
$(document).ready(function (){
var d = new Date();
var natDays = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]];
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (i = 0; i < natDays.length; i++) {
if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$(".datepicker").datepicker({
minDate: new Date(d.getFullYear(), 1 - 1, 1),
maxDate: new Date(d.getFullYear()+1, 11, 31),
hideIfNoPrevNext: true,
beforeShowDay: noWeekendsOrHolidays,
});
});
});
In the latest Bootstrap 3 version (bootstrap-datepicker.js) beforeShowDay expects a result in this format:
{ enabled: false, classes: "class-name", tooltip: "Holiday!" }
Alternatively, if you don't care about the CSS and tooltip then simply return a boolean false to make the date unselectable.
Also, there is no $.datepicker.noWeekends, so you need to do something along the lines of this:
var HOLIDAYS = { // Ontario, Canada holidays
2017: {
1: { 1: "New Year's Day"},
2: { 20: "Family Day" },
4: { 17: "Easter Monday" },
5: { 22: "Victoria Day" },
7: { 1: "Canada Day" },
8: { 7: "Civic Holiday" },
9: { 4: "Labour Day" },
10: { 9: "Thanksgiving" },
12: { 25: "Christmas", 26: "Boxing Day"}
}
};
function filterNonWorkingDays(date) {
// Is it a weekend?
if ([ 0, 6 ].indexOf(date.getDay()) >= 0)
return { enabled: false, classes: "weekend" };
// Is it a holiday?
var h = HOLIDAYS;
$.each(
[ date.getYear() + 1900, date.getMonth() + 1, date.getDate() ],
function (i, x) {
h = h[x];
if (typeof h === "undefined")
return false;
}
);
if (h)
return { enabled: false, classes: "holiday", tooltip: h };
// It's a regular work day.
return { enabled: true };
}
$("#datePicker").datepicker({ beforeShowDay: filterNonWorkingDays });
This work for me:
$( "#datepicker" ).datepicker({
beforeShowDay: function( date ) {
var day = date.getDay();
return [ ( day > 0 && day < 6 ), "" ];
}
});
For Saturday and Sunday You can do something like this
$('#orderdate').datepicker({
daysOfWeekDisabled: [0,6]
});
To Disable the Weekends the API has a built-in feature
$('#data_1 .input-group.date').datepicker({
daysOfWeekDisabled: [0,6],
});
0 = Sunday
6 = Sunday