Question

在我的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');并且字段本身是灰色的，但我仍然可以使用该字段输入值，日历会弹出，甚至可以点击框旁边的日历图像。

任何人都知道为什么会这样？我错过了什么吗？

Answer 1

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

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

Answer 2

尝试

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

Answer 3

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

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

要停止可点击的图像，您可以取消绑定该

上的点击事件

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

Answer 4

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

使用 bootstrap Datepicker

可以100％正常工作

Answer 5

我也有这个错误！

然后我改变了这个

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

到此

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

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

现在它的工作对我很好..

Answer 6

只需使用以下代码

即可

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

它不会显示datepicker的显示

Answer 7

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

为我做了诀窍!!

Answer 8

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

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

然后重新启用它：

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

这是 documentation。

Answer 9

这适用于切换启用和禁用JQuery的datepicker：

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选项中使用启用/禁用时，它的行为方式不应该如此。它只有在启用和禁用它后才能工作，但是一旦你禁用它，它就不能再启用了，所以上面的代码对我来说非常好用：

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');  }

Answer 10

我的公司内部网中有一个单页应用，其中某些日期字段需要被阻止＆＃34;在某些情况下。这些日期字段具有 datepicker 绑定。

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

禁用该字段（或禁用 datepicker ）会产生 serialize（）或 serializeArray（）的副作用。

其中一个选项是从这些字段取消绑定 datepicker 并使它们成为＆＃34;正常＆＃34;领域。但最简单的解决方案是将字段（或字段）设置为只读，以避免日期选择器在接收焦点时起作用。

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

Answer 11

这对我有用

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

Answer 12

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

＆＃13;

/***
  *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);
  }
});

＆＃13;

<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>

＆＃13;

Answer 13

投票最多的解决方案对我不起作用。我有默认的禁用日期选择器，工作正常。但是，当需要在 window.onload 功能中启用它们时， $（＆＃34;＃award_start_date＆＃34;）。datepicker（＆＃39;启用＆＃39; ）; 语法未启用小部件。我能够编辑该字段，就好像它是一个文本输入字段，但没有得到日历选择器。

这是什么工作：

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真棒，所以我可能会错过一些更精细的点......

Answer 14

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

Answer 15

当输入文本字段被禁用或readOnly时，会自动禁用Datepicker：

$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;
}
});

Answer 16

尝试类似的方法会有所帮助

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

谢谢

Answer 17

您只需从输入中删除hasDatepicker类即可删除datepicker。

<强>代码

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

Answer 18

您可以将表单字段替换为其副本：

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

然后再次初始化datetimepicker。

Answer 19

试试这个：

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

jQuery：启用/禁用datepicker

19 个答案: