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>

Advertisements

About Gokul Dahal, Nepal

Software Engineer, Freelancer, Design and Develop web applications,Software Developer Nepal, FreeLancer Nepal Contact : gokuldahal@gmail.com
This entry was posted in ASP.NET, C#, Javascript and Jquery and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s