我有三个单选按钮
今天 9 月 1 日其他。
<span class="spacing_10">
<input type="radio" id="radio3" name="radios" value="">
<label for="radio3">Today</label>
</span>
<span class="spacing_10">
<input type="radio" id="radio4" name="radios" value="">
<label for="radio4">1 Aug</label>
</span>
<span class="spacing_10">
<input type="radio" id="CoverStartDateOther" name="radios" value="">
<label for="CoverStartDateOther">Other</label>
</span>
我的要求很简单。当我单击其他选项时,我必须显示日期选择器。
我尝试过以下代码,但它对我不起作用......
$('#CoverStartDateOther').datepicker({
numberOfMonths: 2,
});
第二个要求是,从日期选择器中选择日期时,我必须隐藏“其他”文本并必须显示日期。
请帮我解决这个问题...
最佳答案
jQuery UI 日期选择器只能分配给输入文本
,而不能分配给单选按钮。
文档:
The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
因此,您必须通过添加字段(最终隐藏)或内联日期选择器来重构 HTML 和 JS。
在此代码中,我添加了一个额外的隐藏字段和更新 radio 文本的代码,更新代码在日期选择器的 onSelect
选项中触发。
HTML:
<span class="spacing_10">
<input type="radio" id="radio3" name="radios" value="">
<label for="radio3">Today</label>
</span>
<span class="spacing_10">
<input type="radio" id="radio4" name="radios" value="">
<label for="radio4">1 Aug</label>
</span>
<span class="spacing_10">
<input type="text" id="CoverStartDateOtherPicker" />
<input type="radio" id="CoverStartDateOther" name="radios" value="">
<label for="CoverStartDateOther">Other</label>
</span>
代码:
$(document).ready(function () {
$("#CoverStartDateOtherPicker").datepicker({
onSelect: function () {
$("label[for='CoverStartDateOther']").text($(this).val());
}
});
$("#CoverStartDateOther").click(function () {
$("#CoverStartDateOtherPicker").datepicker("show");
});
});
关于jquery - 单选按钮的绑定(bind)日期选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18385472/