Bootstrap日期戳禁用功能 [英] Bootstrap datepicker disable feature

问题描述

我需要在我的项目中的一个功能，我认为bootstrap datepicker仍然不提供。我想启用/禁用datepicker字段，以便用户无法更改其值。

有什么想法吗？

提前谢谢。

解决方案

我找到了一个解决方案，只是修改了引导日历代码。覆盖this._events部分以禁用keyup / down事件对我有用：

  _buildEvents：function（）{
 if（this.isInput）{//单输入
 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 = [
 //对于不可读，允许键盘nav 
 [this.element.find（'input'），{
 // focus：$ .proxy（this.show，this），
 // keyup： $ .proxy（this.update，this），
 // keydown：$ .proxy（this.keydown，this）
}]，
 [this.component，{
点击：$ .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），{
 mouseown：$ .proxy（function（e）{
 //在datepicker外面点击，隐藏
 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）
}] 
]; 
}，
  

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.

Any ideas about it?

Thank you in advance.

解决方案

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:

_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)
            }]
        ];
    },

这篇关于Bootstrap日期戳禁用功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！