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

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

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

score 70 · Accepted Answer

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

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

score 16 · Accepted Answer

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

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

要停止图像可点击，您可以取消绑定点击事件

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

score 14 · Accepted Answer

14

尝试

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

于 2013-08-21T09:57:16.167 回答

score 6 · Accepted Answer

6

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

这与bootstrap Datepicker 100% 有效

于 2014-09-23T13:31:57.030 回答

score 6 · Accepted Answer

只需使用以下代码

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

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

score 3 · Accepted Answer

3

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

为我做了伎俩！

于 2015-04-01T15:04:56.150 回答

score 3 · Accepted Answer

我也有这个错误！

然后我改变这个

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

至此

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

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

现在它对我来说很好..

score 3 · Accepted Answer

这适用于我切换启用和禁用 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); }

我不知道为什么，但是当我在日期选择器选项中使用启用/禁用时，它的行为不应该是这样。它仅在您启用和禁用它之后才有效，但是一旦您禁用它，它就不会再次启用，所以上面的代码对我来说非常好：

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

score 1 · Accepted Answer

1

这对我有用

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

于 2016-08-25T17:12:07.267 回答

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

我在我们公司的 Intranet 中有一个单页应用程序，在某些情况下需要“阻止”某些日期字段。这些日期字段具有日期选择器绑定。

将字段设为只读并不足以阻止字段，因为当字段获得焦点时，日期选择器仍会触发。

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

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

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

score 1 · Accepted Answer

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

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

然后重新启用它：

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

这是文档。

score 0 · Accepted Answer

好吧，您可以通过简单地从输入中删除hasDatepicker类来删除日期选择器。

代码

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

score 0 · Accepted Answer

您可以使用此代码来切换禁用 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>

score 0 · Accepted Answer

尝试这样的事情它会帮助你

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

谢谢

score 0 · Accepted Answer

投票最多的解决方案对我不起作用。我有默认禁用的日期选择器，它工作正常。但是，当需要在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 很棒的第二天，所以我可能会遗漏一些更好的点......

score 0 · Accepted Answer

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

score -1 · Accepted Answer

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

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

然后再次初始化 datetimepicker。

score -1 · Accepted Answer

-1

尝试这个：

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

于 2014-05-28T09:30:20.040 回答

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

19 回答 19

Related

Reference