ブートストラップ日付ピッカーディセーブル機能

Question

私のプロジェクトでは、ブートストラップdatepickerはまだ提供していない機能が必要です。私は、ユーザーがその値を変更することができないようにdatepickerフィールドを有効/無効にしたいと思います。 readOnly機能のようなものです。

それについてのアイデアは？

ありがとうございます。

Answer 1

解決策が見つかりましたが、ブートストラップカレンダーコードを変更するだけでした。イベントをkeyUpイベント/ダウンを無効にするthis._events部分は私のために働いオーバーライド：

_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 2

onRenderブートストラップのイベントを使用すると、datepickerが無効になります。

onRender：1日の日付ピッカー内でレンダリングされるときに、このイベントが発生しています。文字列を返す必要があります。 日を選択しないようにするには「無効」を返します。

Answer 3

あなただけのjqueryのattrの方法

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

ザッツすべてを使用する必要があります:)

Answer 4

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

このブートストラップ日付ピッカーとJquery

Answer 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")); 
    }); 

Answer 6

あなたは次の操作を行うことができます。

無効の場合：

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

と有効化のために：

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

Answer 7

をちょうどこの操作を行います。

の

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

公式ドキュメント：

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

が、それはあまりにもあなたのために働くホープ： https://eonasdan.github.io/bootstrap-datetimepicker/Functions/

Answer 8

私は次のように受け入れ可能な解決策を得ることができました！

Answer 9

使用このコード

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