UmEr Khan
UmEr Khan

Reputation: 11

birthday picker in JQuery

I write this code for birthday picker in java script, but it is not displaying the options in drop-down list. How can I show them.The output of this code is 3 drop-down lists with no options in them. I want to make a complete birthday picker with accurate number of days, and 29 days for the month of February in a leap year. I will be very thankful to all of you.

<script type="text/javascript">
    $(function () {

        for (i = new Date().getFullYear() ; i > 1900; i--) {
            $('#years').append($('<option />').val(i).html(i));
        }

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

        $('#years, #months').change(function () {

            updateNumberOfDays();

        });

    });

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

    }

    function daysInMonth(month, year) {
        return new Date(year, month, 0).getDate();
    }
</script>
<body>
<h1>
    Birthday
</h1>
<select id="days"></select>
<select id="months"></select>
<select id="years"></select>
</body>

Upvotes: 1

Views: 2657

Answers (1)

Mazzu
Mazzu

Reputation: 2839

Your code is working fine.

I guess you haven't included jQuery file in your code.

Your code for calculating number of days for month of feb in leap year also works fine

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

    }

Please refer to this fiddle for same. :)

Upvotes: 1

Related Questions