Click here to Skip to main content
14,331,896 members

ASP.NET - Date Picker Server Control

Rate this:
4.33 (15 votes)
Please Sign up or sign in to vote.
4.33 (15 votes)
13 Oct 2009GPL3
The article provides an example of how to develop an ASP.NET Date Picker server/user control. It includes both source and ready to use build (binary).


The article provides an example of how to develop an ASP.NET Date Picker server control, utilising: embedded web resources, client scripts, inner properties, and globalization (date formatting). It includes both source and ready to use build/demo.


I've been hunting around for a free open source date picker control for a little while, and couldn't find one that quite met my needs. Since I have not had the chance to make my own server control before, I thought I would create a date picker control and share my experience.

This release had two main focuses. Firstly, due to being Australian (d/MM/yyyy) I wanted the control to be compatible with different culture date formats through the use of globalization. Secondly, the control needed to provide a high level style/appearance control by utilizing the inner property persistence mode.

Using the Code

The DatePicker server control is an input control that lets the user select a date from a calendar. By default, the Culture property of the control is set to CultureInfo.CurrentCulture, which uses the current culture of the web application/server. However, the DatePicker control can also use a different culture by changing the value of the Culture property to a new CultureInfo. The selected date text displayed in the DatePicker control is displayed in the format specified by using the Culture property.

The DatePicker control contains several properties that allow you to control the appearance of the control. Styles can be applied to different elements of the calendar pane using either markup or code behind. The display width of the DatePicker control, in Units, is determined by its Width property. Due to an issue encountered with Internet Explorer, the width of the control is set by the width of the textbox.

You can also specify the first day of the calendar week by changing the value of the FirstDayOfWeek property. By default, the first day of week is set to Sunday. The date that represents today's date can also be changed by setting the value of the TodaysDate property. Similarly, you can set the DateSelected property.

The DatePicker control allows for auto postback when the date selected is changed. This can be set by changing the value of the AutoPostBack property.

DatePicker Members

Public Properties

  • AlternateMonthStyle: Gets or sets style of day cells for next and pervious month.
  • AutoPostBack: Gets or sets whether the control will postback on selected date changed. Default value is False.
  • CalendarTableStyle: Gets or sets style of inner calendar table.
  • PaneWidth: Gets or sets width of floating pane. Default is 150px.
  • Culture: Gets or sets culture of control. Default is CultureInfo.CurrentCulture.
  • DayHeaderStyle: Gets or sets style of calendar day header row.
  • FirstDayOfWeek: Gets or sets the calendar's first day of week.
  • MonthStyle: Gets or sets the day cell style of the current month position.
  • NextPrevMonthStyle: Gets or sets the style of the next/previous month navigation link.
  • NextPrevYearStyle: Gets or sets the style of the next/previous year navigation link.
  • PaneHeaderStyle: Gets or sets the style of the pane header.
  • PaneTableStyle: Gets or sets the style of the pane. Can be used to change the border style of pane.
  • SelectedDate: Gets or sets the selected date of the control.
  • SelectedStyle: Gets or sets the style of the selected date day cell.
  • TitleStyle: Gets or sets the style of the month calendar title.
  • TodaysDate: Gets or sets the date that represent today's date.
  • TodayStyle: Gets or sets the style of today's day cell.

Public Events

  • SelectedDateChanged: Occurs when selected date is successfully changed. If the date cannot be parsed, an error will be thrown.

Points of Interest

Embedding Web Resources

To access embedded resources like images and JavaScript that are stored within your server control assembly, you can utilise the WebResource attribute. After either creating a resources file or changing the build action of a file (to "embedded resource"), you can insert WebResource assembly references into the namespace of your class.

[assembly: WebResource("SlimeeLibrary.Images.DatePicker.gif","image/gif")]
[assembly: WebResource("SlimeeLibrary.Javascript.DatePicker.js", "text/javascript")]
[assembly: WebResource("SlimeeLibrary.Javascript.DateTime.js", "text/javascript")]
namespace SlimeeLibrary

Registering Client Scripts

In combination with using embedded web resources for the client JavaScript, you can utilise the Page.ClientScript property to check if the control's embedded web resources are already registered and to register any new JavaScript.

The following example checks to see if a script is already registered. If not, it will register the script.

if (!Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(), "DatePicker"))

Persistence Mode Inner Properties

To allow styles to be defined in ASP.NET markup, you can utilise the PersistenceModeAttribute.Mode attribute property. Defining the persistence mode of your class property will enable this functionality.

public TableStyle PaneTableStyle
        if (_paneTableStyle == null)
            // Set Default Style
            _paneTableStyle = new TableStyle();
            _paneTableStyle.BorderStyle = BorderStyle.Solid;
            _paneTableStyle.BorderColor = System.Drawing.ColorTranslator.FromHtml("gray");
            _paneTableStyle.BorderWidth = new Unit("1px");
        return _paneTableStyle; 
    set { PaneTableStyle.CopyFrom(value); }

The following ASP.NET markup demonstrates the inner property functionality.

<cc1:DatePicker ID="DatePicker1" runat="server" AutoPostBack="true" 

	Width="100px" PaneWidth="150px">
    <PaneTableStyle BorderColor="#707070" BorderWidth="1px" BorderStyle="Solid" />
    <PaneHeaderStyle BackColor="#0099FF" />
    <TitleStyle ForeColor="White" Font-Bold="true" />
    <NextPrevMonthStyle ForeColor="White" Font-Bold="true" />
    <NextPrevYearStyle ForeColor="#E0E0E0" Font-Bold="true" />
    <DayHeaderStyle BackColor="#E8E8E8" />
    <TodayStyle BackColor="#FFFFCC" ForeColor="#000000" 

	Font-Underline="false" BorderColor="#FFCC99"/>
    <AlternateMonthStyle BackColor="#F0F0F0" 

	ForeColor="#707070" Font-Underline="false"/>
    <MonthStyle BackColor="" ForeColor="#000000" Font-Underline="false"/>

Globalization - Controlling Date Formats

By referencing the System.Globalization namespace and utilizing the CultureInfo.DateTimeFormat property, you can determine the required date format and parse the selected date according to the set culture.

Description("Set the culture for parsing the date values.")]
public CultureInfo Culture
        object o = ViewState["Culture"];
        return (o != null) ? (CultureInfo)o : CultureInfo.CurrentCulture;
    set { ViewState["Culture"] = value; }
// Monitor selected value change. Raise SelectedDateChanged event on change.
protected virtual void OnSelectedDateChanged(object sender, EventArgs e)
    //If date can't be parsed throw format exception. 
    //For other exceptions throw system exception.
    if (textBox.Text != string.Empty)
            this.SelectedDate = DateTime.Parse(textBox.Text, Culture);
            if (SelectedDateChanged != null)
                SelectedDateChanged(this, e);
        catch (FormatException ex)
            throw new FormatException("Invalid selected date format. 
					Could not parse date.", ex);
        catch (Exception ex)
            throw new Exception("Unknown exception.", ex);


As updates are made to the control, I'll use this area for version control. If you have any ideas or suggestions, don't hesitate to keep me posted. Keep watch of my blog, I'm looking to create more controls soon. I'm also looking for some online projects to contribute to. If you have a project that needs a hand, let me know. Many thanks.

v1.0.2 - Minor Update

2009 October 13: Fixed issue with SelectedDate property on load

v1.0.1 - Minor Update

2009 October 12: Fixed issue with control rendered IDs when within content place holders


This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


About the Author

Software Developer (Junior)
Australia Australia
I’m another .NET hobbyist from the land down under that attains enjoyment from tinkering with desktop & web application. I'm currently looking for online open-source projects to contribute to. If you need a hand let me know.

Visit my blog at:

Comments and Discussions

Questionhow to bind with datagrid or gridview and get the value through javascript function for validation Pin
praveen.rewadia5-Jun-16 9:06
memberpraveen.rewadia5-Jun-16 9:06 
Questionthanks, great control, but don't understand how to setup dateformat Pin
luckiejacky745696929-Mar-15 21:45
memberluckiejacky745696929-Mar-15 21:45 
GeneralThanks! Pin
Member 108969426-Nov-14 9:28
memberMember 108969426-Nov-14 9:28 
QuestionHow do I register this control on IIS 7 Pin
Member 404261414-Apr-14 20:56
memberMember 404261414-Apr-14 20:56 
QuestionHow do I change the color Pin
WizLiz8-Jan-14 3:13
memberWizLiz8-Jan-14 3:13 
GeneralMy vote of 5 Pin
Chrisogonas Mc'Odhiambo1-Aug-13 21:14
memberChrisogonas Mc'Odhiambo1-Aug-13 21:14 
Questionposition of calendar Pin
S-u-p-e-r-m-a-n19-Jul-13 8:25
memberS-u-p-e-r-m-a-n19-Jul-13 8:25 
AnswerRe: position of calendar Pin
Waiver Wire Addict28-Oct-13 13:02
memberWaiver Wire Addict28-Oct-13 13:02 
Questionclearing selcetd date Pin
louisventer17-Jun-13 2:59
memberlouisventer17-Jun-13 2:59 
GeneralGreat Pin
zoli7712310-Jun-13 8:38
memberzoli7712310-Jun-13 8:38 
QuestionNew to This Pin
Member 79571428-Apr-13 9:38
memberMember 79571428-Apr-13 9:38 
GeneralMy vote of 1 Pin
Ashish Sharma110-Dec-12 2:00
memberAshish Sharma110-Dec-12 2:00 
Questionthank you, it was just what i was looking for.... lifesaver Pin
Member 895641923-Jul-12 1:03
memberMember 895641923-Jul-12 1:03 
QuestionAdding Validation Pin
Lance Rose27-Apr-12 4:43
memberLance Rose27-Apr-12 4:43 
GeneralMy vote of 5 Pin
Аslam Iqbal27-Feb-12 0:45
professionalАslam Iqbal27-Feb-12 0:45 
QuestionCulture info question Pin
Stjepan Pavuna22-Feb-12 1:15
memberStjepan Pavuna22-Feb-12 1:15 
GeneralNice Control! Pin
.NET Follower29-Oct-10 6:47
member.NET Follower29-Oct-10 6:47 
GeneralRe: Nice Control! Pin
.NET Follower31-Oct-10 20:27
member.NET Follower31-Oct-10 20:27 
QuestionHow to adjust datepicker position on the form Pin
sharada atre26-Oct-10 2:46
membersharada atre26-Oct-10 2:46 
AnswerRe: How to adjust datepicker position on the form Pin
kpheinz4-Feb-12 4:53
memberkpheinz4-Feb-12 4:53 
GeneralThanks a lot for the wonderful control.. Pin
Ninekris27-May-10 14:23
memberNinekris27-May-10 14:23 
QuestionGreat Datepicker control but why do you call postback twice?‏ Pin
spamme5432112-Mar-10 16:11
memberspamme5432112-Mar-10 16:11 
AnswerRe: Great Datepicker control but why do you call postback twice?‏ Pin
slimee15-Mar-10 13:16
memberslimee15-Mar-10 13:16 
Questionhow do we use this control? Pin
maximus.dec.meridius18-Jan-10 13:06
membermaximus.dec.meridius18-Jan-10 13:06 
AnswerRe: how do we use this control? Pin
maximus.dec.meridius18-Jan-10 13:14
membermaximus.dec.meridius18-Jan-10 13:14 

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

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

Posted 3 Oct 2009


43 bookmarked