输入框为只读时如何禁用日期选择器答案

【问题标题】：How to Disable Datepicker when the input box is readonly输入框为只读时如何禁用日期选择器
【发布时间】：2019-05-20 05:24:07
【问题描述】：

当输入框处于只读状态时如何关闭日期选择器？这是我的文本框

<input type="text" name="letter_date" value="12/05/2019"  id="letter_date" class="form-control datepicker" placeholder="Masukkan Tanggal Nota" data-toggle="datepicker" readonly="readonly" />

我已经尝试使用这个 javascript 代码，但是当我选择文本框时，它仍然显示 datepicker。

$('[data-toggle="datepicker"]').datepicker({
    beforeShow: function(i) {
      if ($(this).prop('readonly')) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
        }
    },
    format : 'dd/mm/yyyy',
    autoHide : true
});

【问题讨论】：

标签： javascript jquery datepicker

【解决方案1】：

您可以使用datepicker("option", "disabled", true); 禁用datepicker。

$('[data-toggle="datepicker"]').datepicker({
    beforeShow: function(i) {
        if ($(this).prop('readonly')) {
          console.log('readonly is true');
          $(this).datepicker("option", "disabled", true);
          return;
        }
    },
    format : 'dd/mm/yyyy',
    autoHide : true,
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="letter_date" value="12/05/2019"  
    id="letter_date" class="form-control datepicker" placeholder="Masukkan Tanggal Nota" 
    data-toggle="datepicker" readonly="readonly"/>

--编辑--

对于multiple 输入

$('[data-toggle="datepicker"]').datepicker({
    beforeShow: function(i) {
        if ($(this).prop('readonly')) {
          $(this).datepicker("option", "disabled", true);
          return;
        } 
    },
    format : 'dd/mm/yyyy',
    autoHide : true,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<input type="text" name="letter_date" value="12/05/2019"  
    id="letter_date" class="form-control datepicker" placeholder="Masukkan Tanggal Nota" 
    data-toggle="datepicker" readonly/>

<input type="text" name="letter_date" value="12/05/2019"  
id="letter_date1" class="form-control datepicker" placeholder="Masukkan Tanggal Nota" 
data-toggle="datepicker"/>

<input type="text" name="letter_date" value="12/05/2019"  
id="letter_date2" class="form-control datepicker" placeholder="Masukkan Tanggal Nota" 
data-toggle="datepicker" readonly/>

【讨论】：

这看起来可行，但不知何故却不行。是否有可能因为我有多个使用 data-toggle="datepicker" 参数的文本框而不起作用？
@AtokG - 它也适用于多个inputs。请参阅编辑。只是不要将id's 设置为inputs，因为它们是unique。
还是不行，是不是因为我用readonly="readonly"而不是readonly？
什么是 readonly="readonly"? readonly 是 boolean 属性 - developer.mozilla.org/en-US/docs/Web/HTML/Element/…。如果此属性存在，则认为它是真的。所以不需要将值添加到属性readonly。
我使用 Codeigniter 的 Form helper，默认设置为readonly="readonly"，不能只有readonly

【解决方案2】：

试试下面的代码：

$('[data-toggle="datepicker"]').datepicker({
    beforeShow: function(i) {
      if ($(this).prop('readonly')) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
        }
    },
    format : 'dd/mm/yyyy',
    autoHide : true,
    disabled: true
});

【讨论】：