CODEWITHSUNDEEP
javascript
adam
adam

Reputation: 9

request for a small help with javascript

The following code validates the number of days of month depending on the month selected in the form. The month values start from Jan to Dec, days from 1 to 31 and year from 1900 to 2010. I am trying to make a very small change, I want to add the very first option in each of the three drop down boxes, a blank select option or for example a dash. so that the month drop down's first option is - instead of Jan. For this purpose, I'm adding following line in each drop down.

<option value=""> - </option>

But by adding this, it does not show the number of days of January and February correctly (it shows 1 day less than it should). This is some javascript problem, but I don't understand what is wrong. I shall be so thankful if you can help me with it. Here's complete code for HTML, Javascript and php to populate the form.

<?php
$monthOptions = '';
$dayOptions = '';
$yearOptions = '';
 for($month=1; $month<=12; $month++){
    $monthName = date("M", mktime(0, 0, 0, $month));
    $monthOptions .= "<option value=\"{$month}\">{$monthName}</option>\n";
} for($day=1; $day<=31; $day++){
    $dayOptions .= "<option value=\"{$day}\">{$day}</option>\n";
} for($year=1900; $year<=2010; $year++){
    $yearOptions .= "<option value=\"{$year}\">{$year}</option>\n";
}
?>
<html>
<head>
<script type="text/javascript">

function updateDays()
{
    //Create variables needed
    var monthSel = document.getElementById('month');
    var daySel   = document.getElementById('day');
    var yearSel  = document.getElementById('year');
    var monthVal = monthSel.value;
    var yearVal  = yearSel.value;

    //Determine the number of days in the month/year
    var daysInMonth = 31;
    if (monthVal==2){
        daysInMonth = (yearVal%4==0 && (yearVal%100!=0 || yearVal%400==0)) ? 29 : 28;
    } else if (monthVal==4 || monthVal==6 || monthVal==9 || monthVal==11) {
        daysInMonth = 30;
    }   
    //Add/remove options from days select list as needed
    if(daySel.options.length > daysInMonth){   //Remove excess days, if needed
        daySel.options.length = daysInMonth;
    } while (daySel.options.length != daysInMonth){   //Add additional days, if needed
        daySel.options[daySel.length] = new Option(daySel.length+1, daySel.length+1, false);
    }   
    return;
}

</script>
</head>
<body>
Birthdate:<br />
<select name="month" id="month" onchange="updateDays();">
<?php echo $monthOptions; ?>
</select>

<select name="day" id="day">
<?php echo $dayOptions; ?>
</select>

<select name="year" id="year" onchange="updateDays();">
<?php echo $yearOptions; ?>
</select>

</body>
</html>

Thanks for any help.

Upvotes: 0

Views: 133

Answers (3)

mplungjan
mplungjan

Reputation: 177786

Perhaps this is what you want?

http://plungjan.name/scripts/date/calendars/datepickers/seldate.html

Let me know if you have questions or need a modification

Upvotes: 0

kirilloid
kirilloid

Reputation: 14304

Do not re-invent the wheel, use built-in Date object for checking dates.

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

Also there's an error in your code: "{" just before the comment "Remove excess days, if needed" isn't needed.

Upvotes: 0

Adam Hopkinson
Adam Hopkinson

Reputation: 28795

Why not use an optgroup instead:

<optgroup label="-"> ... </optgroup>

btw, nice name!

Upvotes: 1

Related Questions