2016-11-20 70 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

最简单的方法之一是删除该输入字段的所有指针事件。

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

这将保持数据完好如果你想。

并重新启用指针事件。

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

谢谢。我怎样才能让他们回来? :) –

+0

这真的是一种解决方法,它也将完全禁用单击该输入以开始... @RobertRoss看重复的问题 – casraf

+0

我尝试了所有答案,@casraf。没有任何工作,可能是我的代码。 –

1

这似乎是工作:

$('#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>

相关问题