jQuery 将 bootstrap-datepicker 限制在工作日？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10234153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Limit bootstrap-datepicker to weekdays only?
提问by SWL
Is there anyway to allow only weekday selections in the bootstrap date picker found below? https://github.com/eternicode/bootstrap-datepicker/
无论如何，在下面找到的引导日期选择器中是否只允许选择工作日？ https://github.com/eternicode/bootstrap-datepicker/
I'm instantiating the date picker like this:
我正在像这样实例化日期选择器：
$('#datepicker').datepicker();
/* Update datepicker plugin so that MM/DD/YYYY format is used. */
$.extend($.fn.datepicker.defaults, {
parse: function (string) {
var matches;
if ((matches = string.match(/^(\d{2,2})\/(\d{2,2})\/(\d{4,4})$/))) {
return new Date(matches[3], matches[1] - 1, matches[2]);
} else {
return null;
}
},
format: function (date) {
var
month = (date.getMonth() + 1).toString(),
dom = date.getDate().toString();
if (month.length === 1) {
month = "0" + month;
}
if (dom.length === 1) {
dom = "0" + dom;
}
return month + "/" + dom + "/" + date.getFullYear();
}
});
Thanks for any help.
谢谢你的帮助。
回答by fin
The latest version from https://github.com/eternicode/bootstrap-datepickeralready has an option to disable selection of particular weekdays. From the docs:
https://github.com/eternicode/bootstrap-datepicker的最新版本已经有一个选项可以禁用特定工作日的选择。从文档：
daysOfWeekDisabled
String, Array. Default: ‘', []
Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: disable weekends:
'0,6'or[0,6].
daysOfWeekDisabled
字符串，数组。默认： ''， []
应该禁用的星期几。值为 0（星期日）到 6（星期六）。多个值应以逗号分隔。示例：禁用周末：
'0,6'或[0,6]。
In other words, just instantiate your datepicker like this:
换句话说，只需像这样实例化您的日期选择器：
$('#datepicker').datepicker({
daysOfWeekDisabled: [0,6]
});
Here's a jsfiddle demonstrating this: http://jsfiddle.net/vj77M/1/
这是一个演示这一点的 jsfiddle：http: //jsfiddle.net/vj77M/1/
回答by Kato
** UPDATE **
** 更新 **
Bootstrap datepicker now has a daysOfWeekDisabledoption. See @fin's answer below.
Bootstrap 日期选择器现在有一个daysOfWeekDisabled选项。请参阅下面的@fin 的回答。
** OLD ANSWER **
** 旧答案 **
Assuming your weeks starts on sunday:
假设您的星期从星期日开始：
$(function() {
function disableWeekends($this) {
var $days = $this.find('.datepicker-days tr').each(function() {
var $days = $(this).find('.day');
$days.eq(0).addClass('old').click(false); //Sunday
$days.eq(6).addClass('old').click(false); //Saturday
});
}
$('#dp1').datepicker({
format: 'mm-dd-yyyy'
});
// get instance of the jQuery object created by
// datepicker
var datepicker = $('#dp1').data('datepicker').picker;
// disable weekends in the pre-rendered version
disableWeekends(datepicker);
// disable weekends whenever the month changes
var _fill = datepicker.fill;
datepicker.fill = function() {
_fill.call(this);
disableWeekends(this.picker);
};
});?
If not, just change $days.eq(...) to the correct indices.
如果没有，只需将 $days.eq(...) 更改为正确的索引。
Of course, this only covers the click event and gets you headed in the right direction. I'm quite sure other things like keyboard navigation may need to be addressed.
当然，这仅涵盖点击事件并让您朝着正确的方向前进。我很确定可能需要解决诸如键盘导航之类的其他问题。
EDIT
编辑
For latest version use this code where appropiate
对于最新版本，请在适当的地方使用此代码
// get instance of the jQuery object created by datepicker ? ?
var datepicker = $('#dp1').data('datepicker');
// disable weekends in the pre-rendered version
disableWeekends(datepicker.picker);
// disable weekends whenever the month changes
var _fill = datepicker.fill;
datepicker.fill = function() {{
_fill.call(this);
disableWeekends(datepicker.picker);
}};
回答by Магнайбаяр Ганзориг
also you can try it.
你也可以试试。
onRender: function(date) {
return date.getDay() == 0 || date.getDay() == 6 ? 'disabled' : '';
}
hope it helps someone. :)
希望它可以帮助某人。:)
回答by Srinadh Reddy
$(document).ready(function(){
var date_input=$('input[name="date"]');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
weekStart: 0,
daysOfWeekDisabled: "0,1,2,3,4,5",
daysOfWeekHighlighted: "6",
todayHighlight: true,
autoclose: true,
})
})
