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?
我用一个数据表来选择约会日期。我已经把日期范围设定为下个月。工作的很好。我想把星期六和星期天排除在可供选择之外。这个可以做吗?如果是这样,如何?
11 个解决方案
#1
233
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:
前面有一个选项,它为每个日期调用一个函数,如果允许,返回true;如果不允许,返回false。从文档:
beforeShowDay
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.
函数接受一个日期作为参数,并且必须返回一个包含[0]等于true/false的数组,该数组指示这个日期是否可以选择,1等于CSS类名或“用于默认表示”。在它显示之前,它在datepicker中被调用。
Display some national holidays in the datepicker.
在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.
有一个内置的函数叫noWeekends,它可以阻止你选择周末。
$(".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
更新:注意,在jQuery UI 1.8.19中,前面的选项还接受可选的第三个参数,一个弹出工具提示
#2
37
If you don't want the weekends to appear at all, simply:
如果你根本不想让周末出现,那就简单地说:
CSS
CSS
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
#3
25
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.
我在下面添加了一个数组,在这个数组中,多个天数可以返回false(我们每周二、周三和周四关闭)。我把具体的日期加上年份和无周末的功能捆绑在一起。
If you want weekends off, add [Saturday], [Sunday] to the closedDays array.
如果你想要周末休假,可以在closedDays数组中添加[Saturday]和[Sunday]。
$(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];
}
});
#4
17
The datepicker has this functionality built in!
datepicker内置了这个功能!
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
http://api.jqueryui.com/datepicker/#utility-noWeekends
http://api.jqueryui.com/datepicker/ utility-noWeekends
#5
9
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.
这样,你的约会对象就可以读懂了。这并没有什么不同,这对我来说更有意义。
#6
6
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
这个版本的代码将使u从sql数据库获取假日日期,并禁用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
在sql中创建一个数据库,并将假期日期以MM/DD/YYYY格式保存,Varchar将下面的内容放在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 !!!! :-)
编码快乐! ! ! !:-)
#7
4
$("#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];
}
#8
4
You can use noWeekends function to disable the weekend selection
您可以使用noWeekends函数来禁用周末选择
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
#9
2
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,
});
});
});
#10
0
for disabling days you can do something like this. <input type="text" class="form-control datepicker" data-disabled-days="1,3">
where 1 is Monday and 3 is Wednesday
在禁用的日子里,你可以做这样的事情。,其中1为周一,3为周三
#11
0
In the latest Bootstrap 3 version (bootstrap-datepicker.js) beforeShowDay
expects a result in this format:
在上述最新的Bootstrap 3版本(Bootstrap -datepicker.js)中,预计会出现这种格式的结果:
{ 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.
另外,如果您不关心CSS和工具提示,那么只需返回一个boolean false,使日期不可选。
Also, there is no $.datepicker.noWeekends
, so you need to do something along the lines of this:
此外,没有$.datepicker。现在,你需要做一些类似的事情
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 });
#1
233
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:
前面有一个选项,它为每个日期调用一个函数,如果允许,返回true;如果不允许,返回false。从文档:
beforeShowDay
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.
函数接受一个日期作为参数,并且必须返回一个包含[0]等于true/false的数组,该数组指示这个日期是否可以选择,1等于CSS类名或“用于默认表示”。在它显示之前,它在datepicker中被调用。
Display some national holidays in the datepicker.
在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.
有一个内置的函数叫noWeekends,它可以阻止你选择周末。
$(".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
更新:注意,在jQuery UI 1.8.19中,前面的选项还接受可选的第三个参数,一个弹出工具提示
#2
37
If you don't want the weekends to appear at all, simply:
如果你根本不想让周末出现,那就简单地说:
CSS
CSS
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
#3
25
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.
我在下面添加了一个数组,在这个数组中,多个天数可以返回false(我们每周二、周三和周四关闭)。我把具体的日期加上年份和无周末的功能捆绑在一起。
If you want weekends off, add [Saturday], [Sunday] to the closedDays array.
如果你想要周末休假,可以在closedDays数组中添加[Saturday]和[Sunday]。
$(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];
}
});
#4
17
The datepicker has this functionality built in!
datepicker内置了这个功能!
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
http://api.jqueryui.com/datepicker/#utility-noWeekends
http://api.jqueryui.com/datepicker/ utility-noWeekends
#5
9
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.
这样,你的约会对象就可以读懂了。这并没有什么不同,这对我来说更有意义。
#6
6
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
这个版本的代码将使u从sql数据库获取假日日期,并禁用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
在sql中创建一个数据库,并将假期日期以MM/DD/YYYY格式保存,Varchar将下面的内容放在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 !!!! :-)
编码快乐! ! ! !:-)
#7
4
$("#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];
}
#8
4
You can use noWeekends function to disable the weekend selection
您可以使用noWeekends函数来禁用周末选择
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
#9
2
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,
});
});
});
#10
0
for disabling days you can do something like this. <input type="text" class="form-control datepicker" data-disabled-days="1,3">
where 1 is Monday and 3 is Wednesday
在禁用的日子里,你可以做这样的事情。,其中1为周一,3为周三
#11
0
In the latest Bootstrap 3 version (bootstrap-datepicker.js) beforeShowDay
expects a result in this format:
在上述最新的Bootstrap 3版本(Bootstrap -datepicker.js)中,预计会出现这种格式的结果:
{ 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.
另外,如果您不关心CSS和工具提示,那么只需返回一个boolean false,使日期不可选。
Also, there is no $.datepicker.noWeekends
, so you need to do something along the lines of this:
此外,没有$.datepicker。现在,你需要做一些类似的事情
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 });