Câu trả lời:
Có beforeShowDaytùy chọn, trong đó có một chức năng được gọi cho mỗi ngày, trả về true nếu ngày được phép hoặc sai nếu không. Từ các tài liệu:
trướcShowDay
Hàm lấy một ngày làm tham số và phải trả về một mảng có [0] bằng true / false cho biết ngày này có thể chọn hay không và 1 bằng với tên lớp CSS hoặc '' cho bản trình bày mặc định. Nó được gọi cho mỗi ngày trong datepicker trước khi nó được hiển thị.
Hiển thị một số ngày lễ quốc gia trong 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, ''];
}Một chức năng tích hợp tồn tại, được gọi là noWeekends, ngăn việc lựa chọn ngày cuối tuần.
$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })Để kết hợp cả hai, bạn có thể làm một cái gì đó như (giả sử nationalDayschức năng từ trên):
$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}Cập nhật : Lưu ý rằng kể từ jQuery UI 1.8.19, tùy chọn beforeShowDay cũng chấp nhận một paremeter thứ ba tùy chọn, một tooltip popup
Uncaught TypeError: Cannot read property 'noWeekends' of undefinedchức năng ngày quốc gia hoạt động như mong đợi
Nếu bạn không muốn cuối tuần xuất hiện, chỉ cần:
CSS
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}td.ui-datepicker-week-end { visibility: hidden; }
Những câu trả lời rất hữu ích. Cảm ơn bạn.
Đóng góp của tôi dưới đây thêm một mảng trong đó nhiều ngày có thể trả về sai (chúng tôi đóng cửa vào thứ ba, thứ tư và thứ năm). Và tôi đã gói các ngày cụ thể cộng với năm và các chức năng không có ngày cuối tuần.
Nếu bạn muốn nghỉ cuối tuần, hãy thêm [Thứ bảy], [Chủ nhật] vào mảng đã đóng.
$(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];
}
});Datepicker có chức năng này được tích hợp!
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});Giải pháp ở đây mà mọi người thích dường như rất mãnh liệt ... cá nhân tôi nghĩ rằng làm điều gì đó dễ dàng hơn nhiều như thế này:
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;
}
});Bằng cách này, ngày của bạn là con người có thể đọc được. Nó không thực sự khác biệt, nó chỉ có ý nghĩa hơn với tôi theo cách này.
Phiên bản mã này sẽ khiến bạn có được ngày nghỉ lễ từ cơ sở dữ liệu sql và vô hiệu hóa ngày được chỉ định trong 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
});
});
});Tạo một Cơ sở dữ liệu theo sql và đặt cho bạn ngày nghỉ theo định dạng MM / DD / YYYY dưới dạng Varchar Đặt các nội dung dưới đây vào một tệp 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]Chúc mừng mã hóa !!!! :-)
$("#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];
}Trong phiên bản này, tháng, ngày và năm xác định ngày nào sẽ chặn trên lịch.
$(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,
});
});
});để vô hiệu hóa ngày bạn có thể làm một cái gì đó như thế này.
<input type="text" class="form-control datepicker" data-disabled-days="1,3">trong đó 1 là thứ hai và 3 là thứ tư
Trong phiên bản Bootstrap 3 mới nhất (bootstrap-datepicker.js) beforeShowDaymong đợi một kết quả ở định dạng này:
{ enabled: false, classes: "class-name", tooltip: "Holiday!" }Ngoài ra, nếu bạn không quan tâm đến CSS và tooltip thì chỉ cần trả về boolean falseđể làm cho ngày không được chọn.
Ngoài ra, không có $.datepicker.noWeekends, vì vậy bạn cần phải làm một cái gì đó dọc theo dòng này:
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 });Thứ bảy và chủ nhật Bạn có thể làm một cái gì đó như thế này
$('#orderdate').datepicker({
daysOfWeekDisabled: [0,6]
});