月年选择器
3.29/5 (5投票s)
如何创建自己的月年选择器控件
介绍
在本文结束时，你将能够创建自己的月份年份选择器。
为什么需要月份年份选择器？
在创建报表时，我们通常提供从日期到日期的筛选器，为此我们使用普通的 DateTimePicker。但最近我收到一个需求，需要提供“起始月份年份”到“结束月份年份”的报表筛选器。这可以使用对 JavaScript 进行一些修改的 DateTimePicker 实现。但在某些情况下我失败了，并决定创建自己的用户控件。
使用技术
.NET 3.5 框架，AJAX。
月份选择器控件
按照以下步骤创建你的月份年份选择器.
步骤 1. 创建一个用户控件
1. 右键单击项目，然后单击“添加新项”。
2. 选择 Web 用户控件，将其命名为“MonthYearPicker.ascx”，然后单击“添加”。
3. 现在将以下代码放入用户控件的设计部分。
<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. 将以下代码放入用户控件的代码隐藏文件。
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;
}
步骤 2. 创建一个要放置此控件的页面
1. 右键单击项目，然后单击“添加新项”。
2. 选择 Web 表单，将其命名为“Default1.aspx”，然后单击“添加”。
4. 使用以下代码在 <html> 标签之上注册你创建的用户控件。
<%@ Register Src="~/UserControl/MonthYearPicker.ascx" TagName="MonthYearPicker" TagPrefix="myp" %>3. 现在将以下代码放入页面的设计部分。
<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. 将以下代码放入页面的代码隐藏文件。
protected void btnShow_Click(object sender, EventArgs e)
{
Response.Write(mypMonthYear.Value);
} 完成了，你已经完成了你自己的月份年份选择器。