Отключение datepicker в поле ввода

Question

У меня есть поле ввода с использованием datepicker. Мне интересно, как отключить call-код datepicker, когда я нажимаю на это поле, так как на моей странице я хочу, чтобы опция даты была доступна только при определенных условиях.

<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

Одним из самых простых способов является удаление всех событий указателя для этого поля ввода.

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

Это сохранит данные, если вы хотите.

И повторно включить события указателя.

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

Answer 2

Это, кажется, работает:

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

Рабочего пример:

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>