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

Question

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

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

然后，当我的php文件（它是一个窗体）中的特殊字段被填充时，我想启用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'); click事件应该可行，但你也可以试试这个：

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

Answer 2

还设置现场时禁用禁用日期选择器如

​​

停止图像被点击，你可以取消绑定上

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

Answer 3

那么你可以删除datepicker b只需从输入中删除hasDatepicker类。

代码

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

Answer 4

尝试

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

Answer 5

我也有这个错误！

然后我改变这个

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

到这

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

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

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

Answer 6

试试这个：

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

Answer 7

简单地使用下面的代码

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

它不会显示的日期选择器

Answer 8

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

这是显示器与引导日期选择器工程100％

Answer 9

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

Answer 10

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

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

而在这之后重新初始化的DateTimePicker。

Answer 11

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

对我做了诡计！

Answer 12

这对我来说

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

Answer 13

什么工作我已经在我们公司内部网的单页的应用程序，其中某些日期字段需要被“封锁”在某些情况下。那些日期字段具有日期选择器绑定。

使字段为只读不足以阻止字段，因为日期选择器仍然在字段接收焦点时触发。

禁用字段（或禁用日期选择器）有副作用的serialize（）或serializeArray（）。

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

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

Answer 14

最受赞誉的解决方案不适合我。我有日期选择器默认为禁用，这工作正常。当需要在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}); 
} 

这可能是因为这只是再现了datepickers，但对于我而言，这是罚款。

这是我使用jQuery UI迷死第二天，所以我可能会丢失一些细微之处的...

Answer 15

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

Answer 16

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

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