jquery - 单选按钮的绑定(bind)日期选择器

Question

我有三个单选按钮

今天 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,

    });

第二个要求是，从日期选择器中选择日期时，我必须隐藏“其他”文本并必须显示日期。

请帮我解决这个问题...

Answer 1

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

});

演示:http://jsfiddle.net/IrvinDominin/mrPUw/