Introduction
At the end of this article you will be capable of creating your own month year picker.
Why MonthYear Picker
While creating reports we normally give from and to date filter, for which we use our normal DateTimePicker. But recently I got a requirement where I want to give "From Month Year" to "To Month Year" filter for a report. This can be achieved using DateTimePicker with some modification on its JavaScript. But on some case I failed and decided to create my own usercontrol.
Technology used
.NET 3.5 Framework, AJAX.
Month Picker Control
Follow below steps to create your Month Year Picker.
Step 1. Create a User Control
1. Right click on the project and click on "Add New Item"
2. Select Web User Control and name it as "MonthYearPicker.ascx" and click Add.
3. Now place below code into designer part of your user control.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtValue" runat="server" Enabled="false" BackColor="White">
</asp:TextBox>
<asp:Button ID="btnSelect" runat="server" Text="..." OnClick="btnSelect_Click" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
loading...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Panel ID="pnlDate" runat="server" Visible="false" CssClass="DatePanel">
<asp:DropDownList ID="ddlMonth" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlYear" runat="server">
</asp:DropDownList>
<asp:Button ID="btnSet" runat="server" Text="Set" OnClick="btnSet_Click" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel> 4. And place the below code to Code Behind of User Control
private string _TextBoxCss;
public string TextBoxCss
{
get { return _TextBoxCss; }
set { _TextBoxCss = value; }
}
private string _SelectButtonCss;
public string SelectButtonCss
{
get { return _SelectButtonCss; }
set { _SelectButtonCss = value; }
}
private string _SetButtonCss;
public string SetButtonCss
{
get { return _SetButtonCss; }
set { _SetButtonCss = value; }
}
private string _PanelCss;
public string PanelCss
{
get { return _PanelCss; }
set { _PanelCss = value; }
}
private int _MinYear;
public int MinYear
{
get { return _MinYear; }
set { _MinYear = value; }
}
private int _MaxYear;
public int MaxYear
{
get { return _MaxYear; }
set { _MaxYear = value; }
}
private int _MinMonth;
public int MinMonth
{
get { return _MinMonth; }
set { _MinMonth = value; }
}
private int _MaxMonth;
public int MaxMonth
{
get { return _MaxMonth; }
set { _MaxMonth = value; }
}
private string _Value;
public string Value
{
get
{
_Value = GetSelectMonthYear();
return _Value;
}
set { _Value = value; }
}
protected void Page_Init(object sender, EventArgs e)
{
if (!IsPostBack)
{
txtValue.CssClass = _TextBoxCss;
btnSelect.CssClass = _SelectButtonCss;
btnSet.CssClass = _SetButtonCss;
pnlDate.CssClass = _PanelCss;
ddlYear.Items.Clear();
_MinYear = _MinYear == 0 ? DateTime.MinValue.Year : _MinYear;
_MaxYear = _MaxYear == 0 ? DateTime.MaxValue.Year : _MaxYear;
for (int i = _MinYear; i <= _MaxYear; i++)
ddlYear.Items.Add(new ListItem(i.ToString(), i.ToString()));
ddlMonth.Items.Clear();
_MinMonth = _MinMonth == 0 ? DateTime.MinValue.Month : _MinMonth;
_MaxMonth = _MaxMonth == 0 ? DateTime.MaxValue.Month : _MaxMonth;
for (int i = _MinMonth; i <= _MaxMonth; i++)
ddlMonth.Items.Add(new ListItem(GetMonth(i), i.ToString()));
}
}
private string GetSelectMonthYear()
{
string _ReturnValue = string.Empty;
string _Month = string.Empty;
if (!string.IsNullOrEmpty(txtValue.Text))
{
string[] _strValue = txtValue.Text.Split(' ');
switch (Convert.ToString(_strValue[0]).ToLower())
{
case "jan":
_Month = "01";
break;
case "feb":
_Month = "02";
break;
case "mar":
_Month = "03";
break;
case "apr":
_Month = "04";
break;
case "may":
_Month = "05";
break;
case "jun":
_Month = "06";
break;
case "jul":
_Month = "07";
break;
case "aug":
_Month = "08";
break;
case "sep":
_Month = "09";
break;
case "oct":
_Month = "10";
break;
case "nov":
_Month = "11";
break;
case "dec":
_Month = "12";
break;
default:
break;
}
if (!(string.IsNullOrEmpty(_Month) & string.IsNullOrEmpty(Convert.ToString(_strValue[1]))))
{
_ReturnValue = _Month + "," + Convert.ToString(_strValue[1]);
}
}
return _ReturnValue;
}
private string GetMonth(int Month)
{
string _ReturnValue = string.Empty;
switch (Month)
{
case 1:
_ReturnValue = "Jan";
break;
case 2:
_ReturnValue = "Feb";
break;
case 3:
_ReturnValue = "Mar";
break;
case 4:
_ReturnValue = "Apr";
break;
case 5:
_ReturnValue = "May";
break;
case 6:
_ReturnValue = "Jun";
break;
case 7:
_ReturnValue = "Jul";
break;
case 8:
_ReturnValue = "Aug";
break;
case 9:
_ReturnValue = "Sep";
break;
case 10:
_ReturnValue = "Oct";
break;
case 11:
_ReturnValue = "Nov";
break;
case 12:
_ReturnValue = "Dec";
break;
default:
break;
}
return _ReturnValue;
}
protected void btnSelect_Click(object sender, EventArgs e)
{
pnlDate.Visible = !pnlDate.Visible;
if (pnlDate.Visible)
{
ddlMonth.SelectedValue = DateTime.Now.Month.ToString();
ddlYear.SelectedValue = DateTime.Now.Year.ToString();
}
}
protected void btnSet_Click(object sender, EventArgs e)
{
txtValue.Text = ddlMonth.SelectedItem.Text + " " + ddlYear.SelectedValue;
pnlDate.Visible = false;
}
Step 2. Create a Page where you want to place this control
1. Right Click on the project and click on "Add New Item"
2. Select Web Form and name it as "Default1.aspx" and click Add.
4. Register you created User Control using below code above <html>
<%@ Register Src="~/UserControl/MonthYearPicker.ascx" TagName="MonthYearPicker" TagPrefix="myp" %>
3. Now place below code into designer part of your Page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Month Year Picker</title>
<style type="text/css">
.DatePanel
{
position: absolute;
background-color: #FFFFFF;
border: 1px solid #646464;
color: #000000;
z-index: 1;
font-family: tahoma,verdana,helvetica;
font-size: 11px;
padding: 4px;
text-align: center;
cursor: default;
line-height: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<table>
<tr>
<td>
Month Year
</td>
<td>
<myp:MonthYearPicker ID="mypMonthYear" runat="server" PanelCss="DatePanel" MinYear="2011"
MaxYear="2020" />
</td>
</tr>
<tr>
<td colspan="2">
Show Value
<asp:Button ID="btnShow" runat="server" Text = "Show" OnClick="btnShow_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html> 4. And Place the below code to Code Behind of Page.
protected void btnShow_Click(object sender, EventArgs e)
{
Response.Write(mypMonthYear.Value);
}
That's it you are don't with your own Month Year Picker.
