引导日期选择器禁用功能
Posted
技术标签:
【中文标题】引导日期选择器禁用功能【英文标题】:Bootstrap datepicker disable feature 【发布时间】:2013-09-05 07:56:37 【问题描述】:我的项目需要一个我认为 bootstrap datepicker 仍然不提供的功能。我想启用/禁用日期选择器字段,以便用户无法更改其值。类似于只读功能。
有什么想法吗?
提前谢谢你。
【问题讨论】:
您找到解决方案了吗? 是的,您可以找到它作为答案发布 如果您验证了解决方案,您应该检查它 【参考方案1】:$("#nicIssuedDate").prop('disabled', true);
这对我有用 Bootstrap Datepicker 和 Jquery
【讨论】:
【参考方案2】:您可以执行以下操作:
禁用:
$("#date").datepicker("option", "disabled", true);
以及启用:
$("#date").datepicker("option", "disabled", false);
【讨论】:
【参考方案3】:您可以使用 Bootstrap 的 onRender
事件,它会禁用 datepicker
。
onRender
:当在日期选择器中呈现一天时会触发此事件。应该返回一个字符串。返回 'disabled' 以禁用 从被选中的那一天。
【讨论】:
【参考方案4】:这样做:
$('#idOfYourCalendar').data("DateTimePicker").disable();
官方文档: https://eonasdan.github.io/bootstrap-datetimepicker/Functions/
【讨论】:
【参考方案5】:尝试将选项 enabledDates 设置为仅包含您想要显示的日期的数组。还将日期设置为该日期。然后将禁用所有其他日期。
enabledDates: ['your_date_to_show'],
例如。
$('#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"));
);
【讨论】:
【参考方案6】:使用此代码
$("#nicIssuedDate").prop('disabled', true);
【讨论】:
【参考方案7】:我找到了一个解决方案,但只是通过修改引导日历代码。覆盖 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)
]
];
,
【讨论】:
【参考方案8】:我设法得到如下可接受的解决方案:
$(".date").datetimepicker(
defaultDate: moment(),
format: 'YYYY-MM-DD'
).end().on('keypress paste', function (e)
e.preventDefault();
return false;
);
希望它也对你有用!
【讨论】:
【参考方案9】:你只需要使用 jquery attr 方法
$('').attr('disabled', true);
就是这样:)
【讨论】:
以上是关于引导日期选择器禁用功能的主要内容,如果未能解决你的问题,请参考以下文章