web-dev-qa-db-ja.com

無効にする方法Bootstrap DatePicker

DatePickerhere の無効化に問題があります。入力フィールドを無効にすることはできませんが、カレンダーグリフィコンを押すとピッカーが開きます。

ピッカーのdisabledおよびreadonlyプロパティを設定しようとしましたが、これは入力フィールドにのみ適用されます。コントロールを完全に無効にするためにグリフィコンを無効にすることはできません。

質問：コントロールを完全に無効にするにはどうすればよいですか？

これが私がこれまでに試したことです：

<div class="input-group input-append date" id="dateRangePicker">
 <input type="text" class="form-control" name="date" id="kalib_dato" disabled readonly />
 <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>


$(document).ready(function() {
    $('#dateRangePicker')
        .datepicker({
            format: 'dd/mm/yyyy',
            startDate: '01/01/2010',
            endDate: '12/30/2020',
            autoclose: true,
            language: 'da',
            enableOnReadonly: false
        });
    });

UPDATE：Iv'eは、オンデマンドで初期化できるところまで来ています。今、私は本当にそれを再び初期化解除したいと思います。

Iv'eは$（document）.off（ '。datepicker.data-api'）;を呼び出そうとしました。ドキュメントに記載されているように、しかしそれは私のために働いていません。

ここに私の問題を示すためのフィドルがあります： [〜＃〜]フィドル[〜＃〜]

twitter-bootstrap-3bootstrap-datepicker
6
DTH

あなたが与えたコメントによると、これはあなたにとって適切な解決策のように見えます

$(document).ready(function() {
    $('#state').on('change', function() {
       if ($(this).val() == 'on') {
           $('#dateRangePicker').datepicker({
                format: 'dd/mm/yyyy',
                startDate: '01/01/2010',
                endDate: '12/30/2020',
                autoclose: true,
                language: 'da',
                enableOnReadonly: false
            });
            $('#dateRangePicker > .form-control').prop('disabled', false);
        } else {
            $('#dateRangePicker').datepicker('remove');
            $('#dateRangePicker > .form-control').prop('disabled', true);
        }
    });
    $('#dateRangePicker > .form-control').prop('disabled', true);
});

実用的な例については、 this jsfiddle を参照してください。

11
acrobat

このコードを試してください

$("#YourDateID").prop('disabled', true);
0
Abdus Salam Azad

日付ピッカーの初期化が入力を対象としている限り、ボタンのクリックを日付ピッカーとは別に制御できます。

入力_#kalib_dato_を_input-group#dateRangePicker_ではなく.datepicker()でターゲットにします。

'kalib_spano'などのIDをボタンスパンに追加すると、ボタンは条件付きで日付ピッカーを表示できます。

_$("#kalib_spano").click(function () {
    if (!someDisabledCondition) {
        // trigger the datepicker
        $("#kalib_dato").datepicker("show");
    }
});
_
0
CRice

他の誰かがangularプラグイン ng2-datetime を使用しているこれを見つけた場合 bootstrap-timepicker とbootstrap-datepickerを内部で使用します。このケースに対するacrobatの回答を微調整することができました。別のセレクターを使用する必要がありましたが、それ以外の場合、acrobatのソリューションは私のケースにぴったりでした。私のクラスcustom-date-time-pickerはプラグインのコンポーネントレベルで適用されます。私はプラグインのタイムピッカー部分のみを使用しており、日付ピッカーを無効にしています。

_<datetime class="custom-date-time-picker" [datepicker]="false" [timepicker]="timePickerOptions"></datetime>_

$('.custom-date-time-picker .form-control').prop('disabled', true); $('.custom-date-time-picker .form-control').prop('disabled', false);

0
Brandon Søren Culley