Javascript 动态删除日期选择器功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6107465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove Datepicker Function dynamically
提问by TTCG
I want to remove datepicker function depending on the dropdownlist selected value. I try the following codes, but it still shows the calendar when I put the cursor in the text box. Please give me a suggestion.
我想根据下拉列表选择的值删除日期选择器功能。我尝试了以下代码，但是当我将光标放在文本框中时它仍然显示日历。请给我一个建议。
$("#ddlSearchType").change(function () {
if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") {
$("#txtSearch").datepicker();
} else {
$("#txtSearch").datepicker("option", "disabled", true);
}
});
回答by Salman A
You can try the enable/disable methods instead of using the option method:
您可以尝试启用/禁用方法而不是使用选项方法：
$("#txtSearch").datepicker("enable");
$("#txtSearch").datepicker("disable");
This disables the entire textbox. So may be you can use datepicker.destroy()instead:
这将禁用整个文本框。所以可能你可以使用datepicker.destroy()：
$(document).ready(function() {
$("#ddlSearchType").change(function() {
if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") {
$("#txtSearch").datepicker();
}
else {
$("#txtSearch").datepicker("destroy");
}
}).change();
});
回答by Jishnu A P
Destroy the datepicker's instance when you don't want it and create new instance whenever necessary.
不需要时销毁日期选择器的实例，并在必要时创建新实例。
I know this is ugly but only this seems to be working...
我知道这很丑陋，但只有这似乎有效......
$("#ddlSearchType").change(function () {
if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") {
$("#txtSearch").datepicker();
}
else {
$("#txtSearch").datepicker("destroy");
}
});
回答by Abdul Kader
Just bind the datepicker to a class rather than binding it to the id . Remove the class when you want to revoke the datepicker...
只需将 datepicker 绑定到一个类，而不是将它绑定到 id 。当您要撤销日期选择器时，请删除该类...
$("#ddlSearchType").change(function () {
if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") {
$("#txtSearch").addClass("mydate");
$(".mydate").datepicker()
} else {
$("#txtSearch").removeClass("mydate");
}
});
回答by Avneesh Srivastava
Well I had the same issue and tried "destroy" but that not worked for me. Then I found following work around My HTML was:
好吧，我遇到了同样的问题并尝试了“销毁”，但这对我不起作用。然后我发现围绕我的 HTML 的以下工作是：
<input placeholder="Select Date" id="MyControlId" class="form-control datepicker" type="text" />
Jquery That work for me:
Jquery 对我有用：
$('#MyControlId').data('datepicker').remove();
回答by Avneesh Srivastava
what about using the official API?
使用官方API怎么样？
According to the API doc:
根据 API 文档：
DESTROY: Removes the datepicker functionality completely. This will return the element back to its pre-init state.
DESTROY：完全删除日期选择器功能。这将使元素返回到它的预初始化状态。
Use:
用：
$("#txtSearch").datepicker("destroy");
$("#txtSearch").datepicker("destroy");
to restore the input to its normal behaviour and
将输入恢复到其正常行为和
$("#txtSearch").datepicker(/*options*/);
$("#txtSearch").datepicker(/*options*/);
again to show the datapicker again.
再次显示数据选择器。
回答by johanDior
This is the solution I use. It has more lines but it will only create the datepicker once.
这是我使用的解决方案。它有更多行，但它只会创建一次日期选择器。
$('#txtSearch').datepicker({
constrainInput:false,
beforeShow: function(){
var t = $('#ddlSearchType').val();
if( ['Required Date', 'Submitted Date'].indexOf(t) ) {
$('#txtSearch').prop('readonly', false);
return false;
}
else $('#txtSearch').prop('readonly', true);
}
});
The datepicker will not show unless the value of ddlSearchType is either "Required Date" or "Submitted Date"
除非 ddlSearchType 的值为“必需日期”或“提交日期”，否则不会显示日期选择器
