jQuery：启用/禁用日期选择器

Posted 2023-05-07

【中文标题】jQuery：启用/禁用日期选择器

【英文标题】：jQuery: enabling/disabling datepicker

【发布时间】：2013-08-23 10:35:15

【问题描述】：

在我的 php 文件中，我想使用 jQuery Datepicker。

当我的文件加载时，我创建了禁用的 Datepicker。

然后，当我的 php 文件（它是一个表单）中的一个特殊字段被填充时，我想启用 Datepicker。

所以，最初我的 Datepicker 看起来像这样：

$("#from").datepicker(
    showOn: "both",
    buttonImage: "calendar.gif",
    buttonImageOnly: true,
    buttonText: "Kalender",
    showAnim: "drop",
    dateFormat: "dd.mm.yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showWeek: true,
    firstDay: 1,
    dayNamesMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
    weekHeader: "KW",
    disabled: true,
    onClose: function(selectedDate) 
        $("#to").datepicker("option", "minDate", selectedDate);
    
);

这很好用，到目前为止没有问题。当我想禁用该字段时，问题就来了。

如果填写特殊字段，我会调用$("#from").datepicker('enable');

这也很好用，但是如果我提到的特殊字段再次为空，我想再次禁用它。

然后我使用$("#from").datepicker('disable');，字段本身是灰色的，但我仍然可以使用该字段输入值，日历弹出，甚至框旁边的日历图像也是可点击的。

有人知道为什么会这样吗？我错过了什么吗？

【参考方案1】：

$("#from").datepicker('disable'); 应该可以，但你也可以试试这个：

$( "#from" ).datepicker( "option", "disabled", true );

【讨论】：

这似乎不起作用即使我不明白为什么它不起作用。 Shaun Hare 提到的 .prop-idea 是可行的

我以前没用过，只是试了一下。不知何故，它似​​乎不包括 jQuery-FW，即使我在“框架和扩展”上单击它..对不起:-(

这里jsfiddle.net/VMzLG我整理了一个简单的演示，令人惊讶的是，我成功禁用它的唯一方法是使用您问题中的代码

这很奇怪......你的演示准确地展示了我认为它会如何工作。但是在我的本地代码上，它不起作用。我很快就要开会了，我会在之后研究这个。不过可能是明天……

我终于找到了！这是一个内部错误……我们使用了特殊的表单元素，在我禁用该项目后，我给了这个类一个新的名字……但是我忘记在新的类名后面附加一个“hasDatepicker”。对不起大家，但你所有的提示都帮助我解开了这个谜。谢谢大家！！ :-)

【参考方案2】：

当你禁用 datePicker 时，也将该字段设置为禁用，例如

$("input").prop('disabled', true);

要阻止图像可点击，您可以取消绑定该图像上的点击事件

$('img#<id or class ref>').unbind('click');

【讨论】：

谢谢，这有助于禁用该字段。奇怪的是 document.getElementsByName('from')[0].readOnly = 'readonly' 没有工作（也没有禁用），但是你提到的 .prop 工作正常！但是，图像仍然可以点击并弹出日期选择器。有没有办法让图像变灰？我不知道 .prop 函数....我对 jQuery 很陌生。但是，图像仍然是可点击的，并会显示日期选择器。有没有办法让它变灰？

你可以解绑它上面的点击事件 - .off ?

我试过$("#from").off();，据说会删除所有的事件处理程序，但没有区别

【参考方案3】：

试试

$("#from").datepicker().datepicker('disable');

【讨论】：

但是在使用它时会将我现有的日期选择器重置为默认值。任何方式来维护我的旧日期选择器属性

【参考方案4】：

只需使用以下代码

$("#from").datepicker(
 showOn: "off"
);

不会显示日期选择器的显示

【讨论】：

简单地回答...在我的情况下，我不想禁用我的日期选择器，因为我在表单提交中使用了它的值...加上 safari 和 firefox 不会停止显示查询日期选择器确实进入了 Chrome，所以我发现这个答案很有用...谢谢

【参考方案5】：

$("#nicIssuedDate").prop('disabled', true);

这与 bootstrap Datepicker

100% 有效

【讨论】：

感谢编写引导程序 Datepicker！

【参考方案6】：

我也遇到了这个错误！

那我改一下

$("#from").datepicker('disable');

到这里

$("#from").datepicker("disable");

错误：单引号和双引号..

现在它对我来说很好..

【参考方案7】：

$('#ElementID').unbind('focus');

帮我搞定了！！

【讨论】：

解释为什么它对你有用会对发帖人有所帮助。

【参考方案8】：

这对我来说适用于切换启用和禁用 JQuery 的日期选择器：

if (condition) 
          $('#ElementID').datepicker(); //Enable datepicker                   
 else 
         //Disable datepicker without the ability to enter any character on text input
          $('#ElementID').datepicker('destroy');
          $('#ElementID').attr('readonly', true); 

我不知道为什么，但是当我在 datepicker 选项中使用 enable/disable 时，它的行为并不正常。它仅在您启用和禁用它之后才起作用，但是一旦您禁用它，它就不会再次启用，所以上面的代码对我来说非常好：

if (condition) 
      $('#ElementID').datepicker('enable'); //Enable datepicker                   
 else 
      //Disable datepicker but I cannot enable it again once it goes through this condition
      $('#ElementID').datepicker('disable');  

【参考方案9】：

这对我有用

$("#from").attr("disabled", true);

【讨论】：

这有一些丑陋的副作用：如果您尝试序列化您的表单，那些禁用的字段将被忽略。

【参考方案10】：

我在公司内部网中有一个单页应用程序，在某些情况下需要“阻止”某些日期字段。这些日期字段具有 datepicker 绑定。

将字段设为只读并不足以阻止字段，因为 datepicker 仍会在字段获得焦点时触发。

禁用字段（或禁用 datepicker）对 serialize() 或 serializeArray() 有副作用。

其中一个选项是从这些字段中取消绑定 datepicker 并使它们成为“正常”字段。但一种最简单的解决方案是使字段（或多个字段）只读，并避免日期选择器在接收焦点时采取行动。

$('#datefield').attr('readonly',true).datepicker("option", "showOn", "off");

【参考方案11】：

当输入文本字段被禁用或只读时，日期选择器会自动禁用：

$j("#" + CSS.escape("$status.expression")).datepicker(
    showOn: "both",
    buttonImageOnly: true,
    buttonImage: "<c:url value="/static/js/jquery/1.12.1/images/calendar.gif"/>",
    dateFormat: "yymmdd",
    beforeShow: function(o, o2) 
    var ret = $j("#" + CSS.escape("$status.expression")).prop("disabled")
        || $j("#" + CSS.escape("$status.expression")).prop("readOnly");

    if (ret)
        return false;
    

    return o2;

);

【讨论】：

稍作修改即可为我工作：将 $j("#" + CSS.escape("$status.expression")) 更改为 $(o)。

【参考方案12】：

对于使用 2012-2013 版本的用户，您可以这样做：

$('#from').datepicker('remove');

然后重新启用它：

$('#from').datepicker('add');

这是documentation。

【参考方案13】：

您可以通过从输入中删除 hasDatepicker 类来删除日期选择器。

代码

$( "#from" ).removeClass('hasDatepicker')

【参考方案14】：

您可以使用此代码通过 jQuery Datepicker 和任何其他表单元素切换禁用。

/***
  *This is the toggle disabled function Start
  *
  **/
(function($) 
  $.fn.toggleDisabled = function() 
    return this.each(function() 
      this.disabled = !this.disabled;
      if ($(this).datepicker("option", "disabled")) 
        $(this).datepicker("option", "disabled", false);
       else 
        $(this).datepicker("option", "disabled", true);
      

    );
  ;
)(jQuery);

/***
  *This is the toggle disabled function Start
  *Below is the implementation of the same
  **/

$(".filtertype").click(function() 
  $(".filtertypeinput").toggleDisabled();
);

/***
  *Implementation end
  *
  **/

$("#from").datepicker(
  showOn: "button",
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
  buttonImageOnly: true,
  buttonText: "Select date",
  defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
  onClose: function(selectedDate) 
    $("#to").datepicker("option", "minDate", selectedDate);
  
);
$("#to").datepicker(
  showOn: "button",
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif ",
  buttonImageOnly: true,
  buttonText: "Select date",
  defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
  onClose: function(selectedDate) 
    $("#from").datepicker("option", "maxDate", selectedDate);
  
);

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<form>
  <table>
    <tr>
      <th>
        <input class="filtertype" type="radio" name="filtertype" checked="checked" value="bydate">
      </th>
      <th>By Date</th>
    </tr>
    <tr>
      <td>
        <label>Form</label>
        <input class="filtertypeinput" id="from">
      </td>
      <td>
        <label>To</label>
        <input class="filtertypeinput" id="to">
      </td>
    </tr>
    <tr>
      <th>
        <input class="filtertype" type="radio" name="filtertype" value="byyear">
      </th>
      <th>By Year</th>
    </tr>
    <tr>
      <td colspan="2">
        <select class="filtertypeinput" disabled="disabled">
          <option value="">Please select</option>
          <option>test 1</option>
          <option>test 2</option>
        </select>
      </td>
    </tr>
    <tr>
      <th colspan="2">Report</th>
    </tr>
    <tr>
      <td colspan="2">
        <select id="report" name="report">
          <option value="">Please Select</option>
          <option value="Company">Company</option>
          <option value="MyExportAccount">MyExport Account</option>
          <option value="Sectors">Sectors</option>
          <option value="States">States</option>
          <option value="ExportStatus">Export Status</option>
          <option value="BusinessType">Business Type</option>
          <option value="MobileApp">Mobile App</option>
          <option value="Login">Login</option>
        </select>
      </td>
    </tr>
  </table>
</form>

【讨论】：

请考虑包含一些关于您的答案的信息，而不是简单地发布代码。我们试图提供的不仅仅是“修复”，而是帮助人们学习。您应该解释原始代码中的问题、您所做的不同之处以及您的更改为何有效。

【参考方案15】：

投票最多的解决方案对我不起作用。我有默认禁用的日期选择器，它工作正常。但是，当需要在 window.onload 函数中启用它们时，$("#award_start_date").datepicker('enable'); 语法没有启用小部件。我能够像编辑文本输入字段一样编辑该字段，但没有获得日历选择器。

这是做什么的：

if (x[i].id == "award_start_date") 
  $("#award_start_date").datepicker( enabled: true );

if (x[i].id == "award_end_date") 
  $("#award_end_date").datepicker( enabled: true );

这可能只是重新创建日期选择器，但就我的目的而言，这很好。

这是我使用 jQuery UI 的第二天，所以我可能会遗漏一些更好的地方...

【参考方案16】：

   $("#datepicker").datepicker(
     dateFormat:'dd/M/yy',
     minDate: 'now',
     changeMonth:true,
     changeYear:true,
     showOn: "focus",
    // buttonImage: "YourImage",
     buttonImageOnly: true, 
     yearRange: "-100:+0",  
  ); 

  $( "#datepicker" ).datepicker( "option", "disabled", true ); //missing ID selector

【参考方案17】：

试试这样的方法对你有帮助

$("#from").click(function () 
           $('#from').attr('readonly', true);
     );

谢谢

【参考方案18】：

试试这个：

$("#form").datetimepicker("disable");

【参考方案19】：

你可以用它的副本替换表单域：

var copy = $('#from').clone(); $('#from').replaceWith(copy);

然后再次初始化 datetimepicker。

【讨论】：

我想你在这里遗漏了一些引号： var copy = $('#from').clone(); $('#from').replaceWith(copy);