Question

我有三个单选按钮

今天1Sept Others。

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

    });

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

请帮帮我...

Answer 1

试试这个： - http://jsfiddle.net/adiioo7/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">

Answer 2

jQuery UI datepicker只能分配给输入text而不能分配给收音机。

文档：

datepicker绑定到标准表单输入字段。专注于输入（单击或使用Tab键）打开a中的交互式日历小覆盖。选择一个日期，单击页面上的其他位置（模糊了输入），或按Esc键关闭。如果选择了日期，则反馈是显示为输入值。

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

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

Answer 3

in 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();
}

});
});

用于单选按钮的绑定日期选择器

3 个答案:

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