CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
PaRsH
PaRsH

Reputation: 1320

Binding datepicker for radio buttons

I have three radio button

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

My requirement is simple. When i click on Others option, i have to display Datepicker.

I have tried following code, but its not worked for me...

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

    });

And second requirement is, On selecting the date from the datepicker, i have to hide "others" text and have to show the date.

Please help me with this ...

Upvotes: 2

Views: 6127

Answers (3)

Irvin Dominin
Irvin Dominin

Reputation: 30993

The jQuery UI datepicker can be assigned only to an input text not a radio.

Docs:

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.

So you have to refactor you HTML and JS by adding an field (eventually hidden) or an inline datepicker.

In this code I added an additional hidden field and the code to update the text of the radio, the update code fires in the onSelect option of the datepicker.

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>

Code:

$(document).ready(function () {

    $("#CoverStartDateOtherPicker").datepicker({
        onSelect: function () {
            $("label[for='CoverStartDateOther']").text($(this).val());
        }
    });

    $("#CoverStartDateOther").click(function () {
        $("#CoverStartDateOtherPicker").datepicker("show");
    });

});

Demo: http://jsfiddle.net/IrvinDominin/mrPUw/

Upvotes: 1

Aditya Singh
Aditya Singh

Reputation: 9612

Try this out:- 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">

Upvotes: 1

Rituraj ratan
Rituraj ratan

Reputation: 10378

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>

in JS

$(document).ready(function(){

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

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

});
});

Upvotes: 0

Related Questions