twitter-bootstrap Bootstrap 日期选择器禁用功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18569292/
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
Bootstrap datepicker disable feature
提问by Juan Luis
I need in my project a feature I think bootstrap datepicker still doesn't offer. I'd like to enable/disable a datepicker field so a user can't be able to change its value. Something like a readOnly functionality.
我的项目中需要一个我认为 bootstrap datepicker 仍然没有提供的功能。我想启用/禁用日期选择器字段，以便用户无法更改其值。类似于只读功能的东西。
Any ideas about it?
关于它的任何想法？
Thank you in advance.
先感谢您。
采纳答案by Juan Luis
I found a solution, but just by modifying the bootstrap calendar code. Overriding the this._events part to disable keyup/down event worked for me:
我找到了一个解决方案，但只是通过修改引导日历代码。覆盖 this._events 部分以禁用 keyup/down 事件对我有用：
_buildEvents: function(){
if (this.isInput) { // single input
this._events = [
[this.element, {
focus: $.proxy(this.show, this),
keyup: $.proxy(this.update, this),
keydown: $.proxy(this.keydown, this)
}]
];
}
else if (this.component && this.hasInput){ // component: input + button
this._events = [
// For components that are not readonly, allow keyboard nav
[this.element.find('input'), {
//focus: $.proxy(this.show, this),
//keyup: $.proxy(this.update, this),
//keydown: $.proxy(this.keydown, this)
}],
[this.component, {
click: $.proxy(this.show, this)
}]
];
}
else if (this.element.is('div')) { // inline datepicker
this.isInline = true;
}
else {
this._events = [
[this.element, {
click: $.proxy(this.show, this)
}]
];
}
this._secondaryEvents = [
[this.picker, {
click: $.proxy(this.click, this)
}],
[$(window), {
resize: $.proxy(this.place, this)
}],
[$(document), {
mousedown: $.proxy(function (e) {
// Clicked outside the datepicker, hide it
if (!(
this.element.is(e.target) ||
this.element.find(e.target).length ||
this.picker.is(e.target) ||
this.picker.find(e.target).length
)) {
this.hide();
}
}, this)
}]
];
},
回答by Chinthaka Dinadasa
$("#nicIssuedDate").prop('disabled', true);
this works for me with Bootstrap Datepicker and Jquery
这适用于 Bootstrap Datepicker 和 Jquery
回答by Sadiksha Gautam
You can do following:
您可以执行以下操作：
For disabling:
禁用：
$("#date").datepicker("option", "disabled", true);
$("#date").datepicker("option", "disabled", true);
and for enabling:
并启用：
$("#date").datepicker("option", "disabled", false);
$("#date").datepicker("option", "disabled", false);
回答by JAVIER A. RAMíREZ Z.
Just do this:
只需这样做：
$('#idOfYourCalendar').data("DateTimePicker").disable();
official docs: https://eonasdan.github.io/bootstrap-datetimepicker/Functions/
官方文档：https: //eonasdan.github.io/bootstrap-datetimepicker/Functions/
回答by Praveen
You can use onRenderevent of Bootstrap, which disables the datepicker.
您可以使用onRenderBootstrap 事件，它会禁用datepicker.
onRender: This event is fired when a day is rendered inside the datepicker. Should return a string. Return 'disabled' to disable the day from being selected.
onRender：当日期选择器中呈现一天时会触发此事件。应该返回一个字符串。返回 'disabled' 以禁止选择这一天。
回答by David Black
Try setting the option enabledDates to an array of only the date you would like to show. Also set the date to that date. All other dates will then be disabled.
尝试将选项 enabledDates 设置为仅包含您要显示的日期的数组。还将日期设置为该日期。然后将禁用所有其他日期。
enabledDates: ['your_date_to_show'],
Eg.
例如。
$('#Date').datetimepicker({
inline: true,
viewMode: "days",
format: "YYYY-MM-DD",
enabledDates: [fetchDate("Date")],
})
.data("DateTimePicker")
.date(fetchDate("Date"));
$('#Date').ready(function (){
$("#Date").data("DateTimePicker").date(fetchDate("Date"));
});
回答by Abdus Salam Azad
Use this code
使用此代码
$("#nicIssuedDate").prop('disabled', true);
回答by Ye Yint
I managed to get acceptable solution as follow:
我设法得到可接受的解决方案如下：
$(".date").datetimepicker({
defaultDate: moment(),
format: 'YYYY-MM-DD'
}).end().on('keypress paste', function (e) {
e.preventDefault();
return false;
});
Hope it works for you too!
希望它也适用于您！
回答by Boncos
You just have to use jquery attr method
你只需要使用 jquery attr 方法
$('').attr('disabled', true);
Thats All :)
就这样 ：）
