Use jQuery on HTML Select Menu for Birthday/Date of Birth format

Question

I'm looking to have a standard HTML select menu for selecting your date of birth. Day, Month, Year. Can someone point me in the right direction to use jQuery to format the correct number of days in the month depending on what year / month is selected etc? Are there any plugins out there to achieve this, or how would I write this myself? Any advice would be appreciated.

kasper Taeymans · Accepted Answer · 2015-01-28T15:49:30.820

basically you need three select boxes (day, month, year) with onchange events on year and month.

changes on the year and month select box need to update the number of days because these depend on year and month. to calculate the number of days for a given month/year, this article will be helpful.

http://www.electrictoolbox.com/javascript-days-in-month/

working example JSFIDDLE

html

<select id="days"></select>
<select id="months"></select>
<select id="years"></select>

js

$(function() {

    //populate our years select box
    for (i = new Date().getFullYear(); i > 1900; i--){
        $('#years').append($('<option />').val(i).html(i));
    }
    //populate our months select box
    for (i = 1; i < 13; i++){
        $('#months').append($('<option />').val(i).html(i));
    }
    //populate our Days select box
    updateNumberOfDays(); 

    //"listen" for change events
    $('#years, #months').change(function(){
        updateNumberOfDays(); 
    });

});

//function to update the days based on the current values of month and year
function updateNumberOfDays(){
    $('#days').html('');
    month = $('#months').val();
    year = $('#years').val();
    days = daysInMonth(month, year);

    for(i=1; i < days+1 ; i++){
            $('#days').append($('<option />').val(i).html(i));
    }
}

//helper function
function daysInMonth(month, year) {
    return new Date(year, month, 0).getDate();
}

Thanks so much, kasper, this is great. The only thing I noticed is that when you change months, the days append rather than replace? — Chris, Sep 19 '13 at 18:51
updated my answer to get rid of the appending. I just placed $('#days').html(''); in the beginning of the updateNumberOfDays function. this will remove the previous set options in the days select box. — kasper Taeymans, Sep 19 '13 at 19:00
One quick question, kasper, if you don't mind. I have a PHP variable for the Month, Day and Year from the users current birthday. In my previous PHP code I had something like `if ($bd_day == $day) $selected = ' selected="selected"';` to preselect the date on load. Where would I add this to your code?? — Chris, Sep 19 '13 at 19:03

score 1 · Answer 2 · answered Sep 19 '13 at 17:51

The jQuery UI library has an excellent and highly tailorable widget called a date picker. The page for the widget, as well as the code you can use as a reference can all be found here: http://jqueryui.com/datepicker/

All you need is to include jQuery and the jQuery UI libraries like so in your header:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Then, create a normal textbox:

<input name="Date" id="Date" value="" />

And then initialize the date picker using the following code:

<script type="text/javascript">

    $(function() {
        $("#Date").datepicker({
            changeMonth: true,
            changeYear: true
            });
    };

</script>

The options I put on the datepicker widget allow you to easily jump to a given month/year as will be needed for anyone born several years ago.

Use jQuery on HTML Select Menu for Birthday/Date of Birth format

2 Answers2