Navigating to a specific month and an year in an asp.net calendar control

Suggested Videos
Part 108 - Events and delegates in c#
Part 109 - Loading user controls dynamically
Part 110 - Loading asp.net controls dynamically



This question was asked by 3 to 4 youtube subscribers of my channel. There are several reasons or situations in real time, where we need to navigate to a specific month and an year in an asp.net calendar control. For example, if the date of birth of a person is in the year 1960, we may have to click on the calendar control several times to navigate to that year.

Let's see, how to skip months and years, so that the dates that are too far in the past or future can be easily selected. To achieve this



Step 1: Create an XML file with name Years.XML. Copy and paste the following XML.
<?xml version="1.0" encoding="utf-8" ?>
<Years>
  <Year>
    <Number>2000</Number>
    <Value>2000</Value>
  </Year>
  <Year>
    <Number>2001</Number>
    <Value>2001</Value>
  </Year>
  <Year>
    <Number>2002</Number>
    <Value>2002</Value>
  </Year>
  <Year>
    <Number>2003</Number>
    <Value>2003</Value>
  </Year>
  <Year>
    <Number>2004</Number>
    <Value>2004</Value>
  </Year>
  <Year>
    <Number>2005</Number>
    <Value>2005</Value>
  </Year>
  <Year>
    <Number>2006</Number>
    <Value>2006</Value>
  </Year>
  <Year>
    <Number>2007</Number>
    <Value>2007</Value>
  </Year>
  <Year>
    <Number>2008</Number>
    <Value>2008</Value>
  </Year>
  <Year>
    <Number>2009</Number>
    <Value>2009</Value>
  </Year>
  <Year>
    <Number>2010</Number>
    <Value>2010</Value>
  </Year>
  <Year>
    <Number>2011</Number>
    <Value>2011</Value>
  </Year>
  <Year>
    <Number>2012</Number>
    <Value>2012</Value>
  </Year>
  <Year>
    <Number>2013</Number>
    <Value>2013</Value>
  </Year>
</Years>

Step 2: Create an XML file with name Months.XML. Copy and paste the following XML.
<?xml version="1.0" encoding="utf-8" ?>
<Months>
  <Month>
    <Number>1</Number>
    <Name>January</Name>
  </Month>
  <Month>
    <Number>2</Number>
    <Name>February</Name>
  </Month>
  <Month>
    <Number>3</Number>
    <Name>March</Name>
  </Month>
  <Month>
    <Number>4</Number>
    <Name>April</Name>
  </Month>
  <Month>
    <Number>5</Number>
    <Name>May</Name>
  </Month>
  <Month>
    <Number>6</Number>
    <Name>June</Name>
  </Month>
  <Month>
    <Number>7</Number>
    <Name>July</Name>
  </Month>
  <Month>
    <Number>8</Number>
    <Name>August</Name>
  </Month>
  <Month>
    <Number>9</Number>
    <Name>September</Name>
  </Month>
  <Month>
    <Number>10</Number>
    <Name>October</Name>
  </Month>
  <Month>
    <Number>11</Number>
    <Name>November</Name>
  </Month>
  <Month>
    <Number>12</Number>
    <Name>December</Name>
  </Month>
</Months>

Step 3: Copy and paste the following HTML in any webform
<div style="font-family:Arial">
    Year :
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
        onselectedindexchanged="DropDownList1_SelectedIndexChanged">
    </asp:DropDownList>&nbsp;
    Month:
    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" 
        onselectedindexchanged="DropDownList2_SelectedIndexChanged">
    </asp:DropDownList>
    <br />
    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
        Text="Get Selected Date" />
</div>

Step 4: Copy and paste the following code in the code-behind file
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        LoadYears();
        LoadMonths();
    }
}

private void LoadMonths()
{
    DataSet dsMonths = new DataSet();
    dsMonths.ReadXml(Server.MapPath("~/Data/Months.xml"));

    DropDownList2.DataTextField = "Name";
    DropDownList2.DataValueField = "Number";

    DropDownList2.DataSource = dsMonths;
    DropDownList2.DataBind();
}

private void LoadYears()
{
    DataSet dsYears = new DataSet();
    dsYears.ReadXml(Server.MapPath("~/Data/Years.xml"));

    DropDownList1.DataTextField = "Number";
    DropDownList1.DataValueField = "Number";

    DropDownList1.DataSource = dsYears;
    DropDownList1.DataBind();
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    int year = Convert.ToInt16(DropDownList1.SelectedValue);
    int month = Convert.ToInt16(DropDownList2.SelectedValue);
    Calendar1.VisibleDate = new DateTime(year, month, 1);
    Calendar1.SelectedDate = new DateTime(year, month, 1);
}

protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
    int year = Convert.ToInt16(DropDownList1.SelectedValue);
    int month = Convert.ToInt16(DropDownList2.SelectedValue);
    Calendar1.VisibleDate = new DateTime(year, month, 1);
    Calendar1.SelectedDate = new DateTime(year, month, 1);
}

protected void Button1_Click(object sender, EventArgs e)
{
    Response.Write(Calendar1.SelectedDate.ToShortDateString());
}

At this point, run the project and you should be able to skip to any month and year in an asp.net calendar control. This code can be encapsulated in an user control, and reused anywhere in the entire project.

No comments

Related Posts:

• sql_in_between_operatos IN & BETWEEN IN operator Syntax : SELECT col1, SUM(col2) FROM "list-of-tables" WHERE col3 IN … Read More
• ORDER BY clause ORDER BY clause ORDER BY is an optional clause which will allow you to display the results of your query in a sorted order (ei… Read More
• SQL JOIN table.reference tr.fixzebra { background-color: #F6F4F0; } table.reference th { background-color: #555555; border: 1px solid #555555; … Read More
• SQL INNER JOIN Keyword SQL INNER JOIN Keyword The INNER JOIN keyword returns rows when there is at least one match in both tables. SQL INNER JOIN Syntax SELECT column_n… Read More
• SQL RIGHT JOIN SQL RIGHT JOIN Keyword The RIGHT JOIN keyword returns all the rows from the right table (table_name2), even if there are no matches in the left tab… Read More