2

我有三个单选按钮

今天 1Sept 其他。

<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>

我的要求很简单。当我单击其他选项时，我必须显示 Datepicker。

我已经尝试过以下代码，但它对我不起作用......

$('#CoverStartDateOther').datepicker({
        numberOfMonths: 2,

    });

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

请在这件事上给予我帮助 ...

4

3 回答 3

1

试试这个：- http://jsfiddle.net/aidioo7/nqQ6H/

JS：-

jQuery(function ($) {
    $('#CoverStartDateOther').click(function () {
        $('#datepicker').datepicker({
            numberOfMonths: 2
        });

        $('#datepicker').focus();
    });

    $('#datepicker').change(function(){
        $(".spacing_10").last().text($(this).val());
    });


});

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="radio" id="CoverStartDateOther" name="radios" value="">
    <label for="CoverStartDateOther">Other</label>

</span>
    <input type="text" id="datepicker">
于 2013-08-22T16:15:11.287 回答
1

jQuery UI 日期选择器只能分配给输入text而不是单选。

文件：

日期选择器与标准表单输入字段相关联。专注于输入（单击或使用 Tab 键）以在小叠加层中打开交互式日历。选择一个日期，单击页面上的其他位置（模糊输入），或按 Esc 键关闭。如果选择了日期，则反馈显示为输入值。

因此，您必须通过添加字段（最终隐藏）或内联日期选择器来重构 HTML 和 JS。

在这段代码中，我添加了一个额外的隐藏字段和更新收音机文本的代码，更新代码在日期选择器的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/

于 2013-08-22T21:08:38.283 回答
0

在 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="radio" id="CoverStartDateOther" name="radios" value="">
    <label for="CoverStartDateOther">Other</label>
<input type="text" id="datepicker" />
</span>

在 JS 中

$(document).ready(function(){

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

$(":radio").click(function(){
if($(this).attr("id")=="CoverStartDateOther")
{
$("#datepicker").focus();
}

});
});
于 2013-08-22T16:05:12.707 回答