Populate days dropdownlist for selected month and year using javascript

In this article, i have described how we can populate number of days in day dropdownlist using javascript for the selected month and year. When we change the the month and year, the values in the days drop down will be updated accordingly. I have also taken care of number of days in February for the leap year.

File : leapyear.aspx.cs
Firstly, let us populate the default values for these three dropdowns (day, month, year) as you can see below.

protected void Page_Load(object sender, EventArgs e)
{
for (int i = 1; i <= 31; i++)
ddlDay.Items.Add(new ListItem(i.ToString()));

string[] strMonth = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
for (int y = 0; y = DateTime.Now.Year – 20; y–)
ddlYear.Items.Add(y.ToString());

ddlDay.Items.Insert(0, (new ListItem(“Day”, “Day”)));
ddlMonth.Items.Insert(0, (new ListItem(“Month”, “Month”)));
ddlYear.Items.Insert(0, (new ListItem(“Year”, “Year”)));
}

File : leapyear.aspx

<asp:DropDownList ID=”ddlMonth” runat=”server” onchange=”BindDay()”>
</asp:DropDownList>
<asp:DropDownList ID=”ddlYear” runat=”server” onchange=”BindDay()”>
</asp:DropDownList>
<asp:DropDownList ID=”ddlDay” runat=”server”>
</asp:DropDownList>

And Include the below javascript at the end of the page.

<script type=”text/javascript”>
var ddlDay = document.getElementById(‘<%= ddlDay.ClientID %>’);
var ddlMonth = document.getElementById(‘<%= ddlMonth.ClientID %>’);
var ddlYear = document.getElementById(‘<%= ddlYear.ClientID %>’);
var dayCount = 0;
var leapYear = 0;

function BindDay() {
if (ddlMonth && ddlYear && ddlMonth.value != ‘Month’ && ddlYear.value !=’Year’) {
DaysInMonth(ddlMonth.value);
ClearDayDropdown();
BindDayDropdown();
}
return false;
}

function DaysInMonth(month) {
IsLeapYear();
switch (month) {
case ‘2’: switch (leapYear) {
case 1: dayCount = 29; break;
default: dayCount = 28; break;
}
break;
case ‘4’: dayCount = 30; break;
case ‘6’: dayCount = 30; break;
case ‘9’: dayCount = 30; break;
case ’11’: dayCount = 30; break;
default: dayCount = 31; break;
}
}

function IsLeapYear() {
var year = ddlYear.value;
leapYear = 0;
if ((((parseInt(year) % 4 == 0) && (parseInt(year) % 100 != 0)) || (parseInt(year) % 400 == 0)))
leapYear = 1;
}

function BindDayDropdown() {
var myOption = “”;
for (var d = 1; d <= dayCount; d++) {
var dy = d;

if (parseInt(dy) < 10) {
dy = “0” + dy;
}

myOption = document.createElement(“OPTION”);
myOption.value = dy;
myOption.text = dy;
ddlDay.options.add(myOption);
}
}

function ClearDayDropdown() {
for (var l = ddlDay.options.length – 1; l >= 0; l–) {
ddlDay.remove(l);
}
var selOption = document.createElement(“OPTION”);
selOption.value = “Day”;
selOption.text = “Day”;
ddlDay.options.add(selOption);
}

</script>