引导日期选择器禁用功能

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);

就是这样:)

【讨论】:

以上是关于引导日期选择器禁用功能的主要内容,如果未能解决你的问题,请参考以下文章

如何禁用和启用引导日期选择器

如何动态生成日期选择器引导日期禁用

如何在 Twitter 引导日期选择器中禁用结束日期范围?

在引导日期选择器中禁用过去的日期

在引导程序日期选择器中禁用日期的自动格式化

在引导日期时间选择器中禁用时间