在输入字段上禁用日期选择器

问题描述：

当然，我有一个使用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);

无工作。

[jQuery的：启用/禁用日期选择器]的可能的复制（HTTP：/ /stackoverflow.com/questions/18350923/jquery-enabling-disabling-datepicker） – casraf

答

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

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

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

并重新启用指针事件。

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

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

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

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

答

这似乎是工作：

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

在输入字段上禁用日期选择器

相关推荐