10

我的项目中需要一个我认为 bootstrap datepicker 仍然不提供的功能。我想启用/禁用日期选择器字段，以便用户无法更改其值。类似于只读功能的东西。

有什么想法吗？

先感谢您。

4

9 回答 9

10 
$("#nicIssuedDate").prop('disabled', true);

这适用于我的 Bootstrap Datepicker 和 Jquery

于 2014-09-23T14:00:01.767 回答
4

您可以执行以下操作：

对于禁用：

$("#date").datepicker("option", "disabled", true);

并启用：

$("#date").datepicker("option", "disabled", false);

于 2015-12-07T16:23:08.923 回答
2

您可以使用onRenderBootstrap 的事件，它会禁用datepicker.

onRender：当在日期选择器中呈现一天时会触发此事件。应该返回一个字符串。返回“已禁用”以禁用选择日期。

于 2013-09-02T09:09:26.317 回答
2

只需这样做：

$('#idOfYourCalendar').data("DateTimePicker").disable();

官方文档： https ://eonasdan.github.io/bootstrap-datetimepicker/Functions/

于 2016-06-03T22:43:58.263 回答
1

尝试将选项 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"));
  });
于 2015-06-02T15:48:06.930 回答
1

使用此代码

$("#nicIssuedDate").prop('disabled', true);
于 2017-10-17T05:51:42.067 回答
0

我找到了一个解决方案，但只需修改引导日历代码。覆盖 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)
            }]
        ];
    },
于 2014-03-27T11:05:46.640 回答
0

我设法得到如下可接受的解决方案：

$(".date").datetimepicker({
                defaultDate: moment(),
                format: 'YYYY-MM-DD'
            }).end().on('keypress paste', function (e) {
                e.preventDefault();
                return false;
            });

希望它也适合你！

于 2017-09-17T09:18:59.800 回答
-6

你只需要使用 jquery attr 方法

$('').attr('disabled', true);

就这样 ：）

于 2014-06-04T16:33:33.330 回答