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个回答
73

$("#from").datepicker('disable'); 可以使用，但您也可以尝试以下代码：

$( "#from" ).datepicker( "option", "disabled", true );
这似乎不起作用，尽管我不明白为什么它不起作用。Shaun Hare提到的.prop-idea确实有效。 - Alex K.
我以前从未使用过它，只是尝试了一下。不知何故，它似乎没有包括 jQuery-FW，即使我已经在“框架和扩展”中选中了它。很抱歉 :-( - Alex K.
2
在这里http://jsfiddle.net/VMzLG/，我制作了一个简单的演示，令人惊讶的是，我成功禁用它的唯一方法是使用您问题中的代码。 - omma2289
很奇怪...你的演示正好展示了我认为它应该工作的方式。 但在我的本地代码中，它不起作用。 我很快就有一个会议，之后我会研究这个问题。 可能要等到明天了... - Alex K.
2
我终于找到了！ 这是一个内部错误...我们使用特殊的表单元素，之后我禁用了该项，并给类命名了一个新名称...但我忘记在新类名后附加“hasDatepicker”。 对不起大家，但你们所有的提示都帮助我解决了这个谜团。 谢谢大家！！ :-) - Alex K.
显示剩余6条评论
16

当您禁用日期选择器时，也将字段设置为禁用状态，例如：

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

要停止图像可点击，您可以解除该点击事件的绑定

$('img#<id or class ref>').unbind('click');
谢谢，这帮助禁用了该字段。 奇怪的是 document.getElementsByName('from')[0].readOnly = 'readonly' 没有起作用（也没有禁用），但是您提到的 .prop 却很好用！ 然而，图像仍然可以点击并弹出日期选择器。 有没有办法也将图像变灰？ 我不知道 .prop 函数....我对 jQuery 还很陌生。 然而，图像仍然可以点击并弹出日期选择器。 有没有办法也将其变灰？ - Alex K.
1
你可以使用 .off 方法将其点击事件解除绑定。 - Shaun Hare
我尝试了 $("#from").off();，它被说成可以移除所有的事件处理器，但是却没有任何作用。 - Alex K.
15

尝试

$("#from").datepicker().datepicker('disable');
但是，使用此方法会将我的现有日期选择器重置为默认日期选择器。有没有办法保留原有的日期选择器属性？ - Subrat nayak.
7
$("#nicIssuedDate").prop('disabled', true);

这个可以百分之百地与 Bootstrap日期选择器 配合使用。

写 Bootstrap Datepicker 的人棒棒哒！ - Asraful
6
只需使用以下代码。
$("#from").datepicker({
 showOn: "off"
});

日期选择器不会显示。
非常好的答案...在我的情况下，我不想禁用我的日期选择器，因为我将其值用于表单提交...而且Safari和Firefox不会像Chrome一样阻止查询日期选择器的显示，所以我发现这个答案很有用...谢谢。 - Swap-IOS-Android
3
$('#ElementID').unbind('focus');

这个对我有用！
1
给帖子作者提供一些解释，说明为什么这对你有效，会很有帮助。 - Jace Rhea
3

在 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');  }
3
我也遇到了这个错误！然后我进行了更改。
$("#from").datepicker('disable');

转换为此

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

错误：单引号和双引号混用。

现在它对我来说工作得很好。

1
当输入文本字段被禁用或设置为只读时，日期选择器会自动禁用：
$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)。 - Chesare
1

这是对我有效的方法

$("#from").attr("disabled", true);
这会带来一些不好的副作用：如果您尝试序列化表单，那些禁用的字段将被忽略。 - roetnig
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接