logo标签列表

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

jquerydatepicker
46
在我的php文件中，我想使用jQuery日期选择器。当我的文件加载时，我会创建禁用的日期选择器。然后，在我的php文件中（它是一个表单）填写特殊字段时，我想启用日期选择器。所以，最初我的日期选择器看起来像这样：
$("#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');，字段本身会变成灰色，但我仍然可以使用该字段输入值，日历弹出并且框旁边的日历图像也可以点击。

有人知道为什么会这样吗？ 我有遗漏什么吗？

20个回答
1

如果您使用的是2012-2013版本，您可以这样做：

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

然后要重新启用它：
$('#from').datepicker('add');

这里是文档。
1
我在公司内部网络中有一个单页面应用程序，在特定情况下需要“锁定”某些日期字段。这些日期字段具有datepicker绑定。
将字段设置为只读不足以阻止字段，因为datepicker仍会在字段获得焦点时触发。
禁用字段(或禁用datepicker)会对serialize()或serializeArray()产生副作用。
其中一种选择是从这些字段中解除datepicker并使它们成为“普通”字段。但最简单的解决方案是将字段(或字段)设置为只读，并避免在接收焦点时datepicker起作用。
$('#datefield').attr('readonly',true).datepicker("option", "showOn", "off");
0
尝试类似这样的东西，它会对你有所帮助。
$("#from").click(function () {
           $('#from').attr('readonly', true);
     });

谢谢

0

最受欢迎的解决方案对我没有用。我有默认禁用的日期选择器，这很好用。但是当在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的第二天，所以我可能会忽略一些细节...

0
   $("#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
0
你可以使用此代码在jQuery日期选择器和任何其他表单元素中切换禁用状态。 

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

1
请考虑在您的回答中包含一些信息，而不仅仅是发布代码。我们试图提供的不仅仅是“修复”，还帮助人们学习。您应该解释原始代码中的错误之处，您做了什么不同，以及为什么您的更改起作用。 - Andrew Barber
0

最佳答案对于jquery-ui日历无效，下面的答案会禁用页面上的所有输入:

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

可以通过指定日期选择器id来避免这种情况:

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

0

你可以通过从输入中删除 hasDatepicker 类来简单地移除 datepicker。

代码

$( "#from" ).removeClass('hasDatepicker')
-1
尝试这个：
$("#form").datetimepicker("disable");
-1

您可以使用其副本替换表单字段：

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

然后再次初始化datetimepicker。

1
我觉得你这里漏掉了一些引号：var copy = $('#from').clone(); $('#from').replaceWith(copy); - vlasits
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接