2016-11-20 14 views
1

私は入力フィールドに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); 

どれも働きました。

+1

[jQueryの:有効化/無効化日付ピッカー]の可能性のある重複します(http:/ /stackoverflow.com/questions/18350923/jquery-enabling-disabling-datepicker) – casraf

答えて

3

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

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

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

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

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

の作業例を:

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

ありがとう。そして、どうすれば元に戻すことができますか? :) –

+0

これは本当に回避策です、それはまた、その入力を開始することを完全に無効にするでしょう... @RobertRossは重複した質問を見てください – casraf

+0

私はすべての答えを試しました、@カスラフ。何も働かなかった、おそらくそれは私のコードで何かです。 –

1

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

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>

関連する問題