Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Channels ▼
RSS

.NET

Date Picking and Calendars


Dates are not just text. They reached the status of a standalone data type a while ago. Dates are also a common presence in many input forms, for calendaring, scheduling, contacts, customer care applications. In Windows applications, we have had a date-picker common control since Windows 95. It's a drop-down control with two views—single-line date or expanded, navigable calendar. For desktop applications, picking up a date in a user-friendly manner is a closed problem. Period. What about the Web, instead?

For too many years, and in too many applications, you enter dates as plain text. The formatting is kind of optional and left to the good will of developers. In most cases, users receive some feedback (e.g., tooltips) on how dates are expected to be and then the code-behind class hopefully takes care of parsing the entered text into a date object. As you can imagine, if a misunderstanding occurs on the format, the final date can be something different. For example, "4-5-2007" indicates the 4th of May in the common European format, but the 5th of April in the US standard format. You know the story.

In ASP.NET, you have a Calendar control that acts as a date picker control. It produces a table-based markup that displays all days in the specified month, plus a few days in the previous and next month. It can render weekend days with an alternate style and can optionally allow navigation to find and select the right date. Properly configured, the control can also output non-selectable markup and can be used to indicate a particular input date in the context of a calendar.

The Calendar control supports a few different views (day, month, year), but none that let you enter a date by typing and then expand to view the selected day in the calendar. Is this a problem? It is not a "functional" problem in the sense that you can still pick up and select any date correctly. It has more of an "experience" problem in the sense that letting users choose between typing and selecting makes the whole form more user friendly. To switch between these two views—a collapsed, textbox-like view and a classic, calendar view—you need some script code. And the ASP.NET classic Calendar control doesn't support this feature.

The classic ASP.NET Calendar control, though, suffers from another important software disease—markup obesity. It can output about 9 KB of markup because it's full of tables, cells, rows, anchors, styles, not to mention raw text. Even with the viewstate turned off, the bytes moved for each postback that involves a calendar is significant. In addition, the classic ASP.NET Calendar fires a postback for each click. The user selects a date? The Calendar posts back. The user navigates a month forward? The Calendar posts back. In a month-based view, the user needs to select a date of two years before? The Calendar requires up to 24 postbacks.

As you can see, there a number of issues with the ASP.NET Calendar control, whose more appropriate name would probably have been DatePicker. Especially in the context of AJAX applications, I heartily recommend that you get a commercial control (or one of the excellent shareware/open-source controls available out there) or, at the very minimum, use the Calendar extender from the AJAX Control Toolkit. The Calendar extender is a piece of code that extends the capabilities of a regular text box and pops up a table-based calendar (very similar to the output of the ASP.NET Calendar control), but entirely client-side.

Picking up a date in ASP.NET and AJAX forms is a common task. Picking up the right tool is a must for smart developers.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.