入力フィールドの日付ピッカーを無効にする

Question

私は入力フィールドにdatepickerを使用しています。私はそのフィールドをクリックするとポップアップするdatepickerのcallendarを無効にする方法が不思議に思えます。なぜなら、私のページでは日付オプションを特定の条件でのみ利用できるようにしたいからです。

<input id="date" type="text " class="form-control datepicker" name="date" value="Click to select date"> 

私が試した：

$("#date").datepicker('disable'); 

とと：

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

どれも働きました。

Answer 1

最も簡単な方法の1つは、その入力フィールドのすべてのポインタイベントを削除することです。

$("#date").css('pointer-events', 'none'); 

これは、必要に応じてデータをそのまま維持します。

ポインタイベントを再度有効にする。

$('#date').datepicker('option', 'disabled', t_or_f) 

の作業例を：

$("#date").css("pointer-events", ""); 

Answer 2

これが動作しているようだ

function toggleDatePicker (state) { 
 
    // this actually does the magic 
 
    $('#date').datepicker('option', 'disabled', !state) 
 
} 
 
$(document).ready(function() { 
 
    // init 
 
    $('#date').datepicker(); 
 

 
    
 
    // ignore this, just for the sake of example 
 
    $('#butt').on('click', function() { 
 
    var st = parseInt($(this).data('state')); 
 
    $(this).data('state', st = 1 - st); // toggle 0 and 1 
 
    $(this).text(st ? 'Disable' : 'Enable'); 
 
    toggleDatePicker(Boolean(st)); 
 
    }); 
 
});

@import url(https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<input id="date" type="text " class="form-control datepicker" name="date" value="Click to select date"> 
 

 
<button id="butt" data-state="1">Disable</button>