【问题标题】:Disabling datepicker on an input field在输入字段上禁用日期选择器
【发布时间】:2016-11-20 15:28:29
【问题描述】:

目前我有一个使用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 );

都没有用。

【问题讨论】:

标签: javascript jquery datepicker


【解决方案1】:

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

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

如果您愿意,这将保持数据完整。

并重新启用指针事件。

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

【讨论】:

  • 谢谢。我怎样才能让他们回来? :)
  • 这确实是一种解决方法,它还将完全禁用单击该输入以开始... @RobertRoss 看看重复的问题
  • 我尝试了所有答案,@casraf。没有任何效果,可能与我的代码有关。
  • 您使用的是什么日期选择器库?常规的 jQuery UI 的?
  • @casraf - 是的,我正在使用这个。
【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-27
    • 1970-01-01
    • 1970-01-01
    • 2013-12-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多