Click here to Skip to main content
Click here to Skip to main content

Month Year Picker

, 17 Jun 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
How to create your own Month Year Picker Control

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Muthu Nadar
Team Leader
India India
No Biography provided
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 1 PinmemberMember 102293717-Nov-13 17:25 
Generalnice article Pinmemberkhan mohd faizan21-Aug-12 3:26 
great Effort Muthu....
Questionhave you considered jquery approach? PinmemberSeishin#8-Jun-12 12:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141216.1 | Last Updated 17 Jun 2012
Article Copyright 2012 by Muthu Nadar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid