twitter-bootstrap - ブートストラップの日付ピッカー無効化機能

Question

私のプロジェクトには、ブートストラップの日付ピッカーがまだ提供していないと思われる機能が必要です。ユーザーが値を変更できないように、datepicker フィールドを有効/無効にしたいと考えています。読み取り専用機能のようなもの。

それについてのアイデアはありますか？

前もって感謝します。

Answer 1

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

これは、 Bootstrap Datepicker と Jquery で機能します

Answer 2

次のことができます。

無効にする場合:

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

そして有効にするために：

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

Answer 3

オプション 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"));
  });

Answer 4

解決策を見つけましたが、ブートストラップ カレンダー コードを変更するだけです。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)
            }]
        ];
    },

Answer 5

jquery attr メソッドを使用するだけです

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

それで全部です ：）