如何禁用和启用引导日期选择器

Posted 2023-05-08

【中文标题】如何禁用和启用引导日期选择器

【英文标题】：How to disable and enable the bootstrap datepicker

【发布时间】：2020-07-31 02:19:16

【问题描述】：

我正在尝试禁用和启用引导日期选择器。How to disable Bootstrap DatePicker 中描述的方法对我不起作用，可能是因为我需要在 $(document).ready() 之外禁用/启用它。jQuery ('.date').datepicker('remove'); 可以禁用它，但我无法再次启用它。

我也试过jQuery('.date').prop('disabled', true); 和jQuery('.date').datepicker('option', 'disabled', true); 没有成功。

如何再次启用数据选择器或如何以其他方式禁用它？

更新：部分 html：

<div class="date">
  <input type="text" name="p_date" placeholder="" class="clr-input">
  <span class="input-group-addon">
    <clr-icon shape="calendar"></clr-icon>
  </span>
</div> 

【问题讨论】：

您好，请查看***.com/questions/18350923/… 确保您使用的是正确的 SELECTOR。

我用你的 HTML 更新了 sn-p

【参考方案1】：

如果没有看到 HTML，我不确定您的选择器，但请查看下面的 sn-p 以了解禁用和启用部分是否在 $(document).ready() 函数之外成功完成。也许您对正在使用的特定选择器有疑问？该 sn-p 是根据您链接的答案修改的。

编辑：好的，看到您的 HTML，看起来您正在使用周围的 div 作为选择器，但这并没有访问嵌套输入。我猜测 clr 元素是来自另一个库或 css 的某种图标，但您可以以类似的方式访问它。查看更新的 sn-p：

$(document).ready(function() 
    $('.date').datepicker(
        format: 'dd/mm/yyyy',
        startDate: '01/01/2010',
        endDate: '12/30/2020',
        autoclose: true,
        language: 'da',
        enableOnReadonly: false
    );
);

$('#on').click(function()
  $('.date > input').prop('disabled', false);
)

$('#off').click(function()
  $('.date > input').prop('disabled', true);
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<button id="on">On</button>
<br>
<button id="off">Off</button>

<br><br><br><br><br><br>
<div class="date">
  <input type="text" name="p_date" placeholder="" class="clr-input">
  <span class="input-group-addon">
    <clr-icon shape="calendar"></clr-icon>
  </span>
</div>