(For more resources on Microsoft, see here.)

Designing date picker interface

Dealing with dates is far from simple. Different cultures, a globalized world, and fast information exchange require simple and error-prone ways to keep date formats correct and adjusted to locale and other user preferences.

Silverlight and its Toolkit are now equipped with the Date Picker control, enabling you to easily pick and get date formats.

This recipe shows you how to implement and design this kind of interface.

Getting ready

Start your Expression Blend 4 and then select New project... From the dialog that appears select Silverlight and then Silverlight Application, make sure that Language is set to C# and Version is 4.0. At the end hit OK.

How to do it...

1. After you have created your new project, under the Objects and Timeline pane you will see UserControl and LayoutRoot. LayoutRoot is a Grid control hosted in UserControl.
2. Go to the Asset library and locate the DatePicker control. Draw two DatePicker controls and add two TextBlock controls above them with Text properties set to Start date: and End date:, respectively. Basically, you need to create a simple UI that looks like this:

   

3. As this is really a simple recipe without any real coding, let's just go and hit F5 and explore the current, out-of-the-box supported features.
4. If you click on the calendar icon close to the Start date DatePicker you will see that a drop-down calendar control appears, allowing you to select the date from the calendar interface. You can see that the current date is selected and that by clicking on the header part of the calendar you can easily navigate between months or even years. This all allows for a really fast date selection mechanism.
5. Also, after you select the date, note that it will be displayed in the text field part and it will be formatted according to the local computer settings. The next picture shows you example where user has it's settings set to Croatian( Croatia). In this specific setting, dates are being formatted in the following way: dd.mm.yyyy (Date / Month / Year)

   

6. The same date for the users with Culture settings set to English (United States) looks like this:

   

7. Of course, the DatePicker control allows for some modifications. Select the DatePicker control and under the Properties pane set the SelectedDateFormat to Long. Your date representation will now look somewhat like this:

   

8. From the developer's point of view, having different date formats and representations might look cumbersome and difficult when it comes to handling this information. However, no matter how your date is represented it's easy to get all the required information and manipulate them.
9. For example, the following lines of code are responsible for selecting the day, month, and year and it's completely irrelevant which culture settings you might have.

   txtDay.Text = dtpStart.SelectedDate.Value.Day.ToString();
   txtMonth.Text = dtpStart.SelectedDate.Value.Month.ToString();
   txtYear.Text = dtpStart.SelectedDate.Value.Year.ToString();

10. The result might look like this:

    

11. Also note that there are a number of different methods available for manipulating the date elements. For example, you can use the AddMonths method and add any number of months to the current selection. This might be useful in scenarios where, for example, end date is always calculated as starting date plus one month. Simple code for that would look like this:

    txtMonth.Text = dtpStart.SelectedDate.Value.AddMonths(1).Month.
    ToString();

How it works...

The DatePicker control is one of those rich controls providing you with a broad spectrum of functionalities and out-of-the-box supported features.

We've added the DatePicker controls and it was easy to interact with them. Just by clicking on the calendar icon users have gained simple and familiar interface for them to select any given date. The current date (today) is clearly marked and navigation through months, years, and even decades is supported.

Support for globalization and different time formats is also available. DatePicker will automatically recognize the culture settings on your computer and apply them.

Also, by changing the SelectedDateFormat to Long you've been able to see that the date format can also be selected.

After that, several lines of simple C# code explains how you can get values for the day, month, or year and even perform some manipulations on them that can be used in real life projects.

However, this pattern lacks some more sophisticated support for continuous date range selection. This scenario is explained in the recipe dealing with the Calendar control and related user interface elements.

There's more...

As I said at the beginning of this recipe, dates come in many different forms depending on the cultures or event on the specific user settings. A good user interface will automatically adjust itself and allow users to input date in the format that is appropriate for the specific needs and depending on the specific culture.

However, the simplest and probably the most error prone method is to present the users with the simple and very familiar calendar control. No matter their cultural background, it is safe to assume that everyone is familiar with the calendar metaphor and can easily select the year, month, and a date when presented with one.

Date picker in Silverlight comes with a control that looks like a simple text box enabling you to type in the date in a specific format, but it also features the calendar control activated by clicking on the calendar icon. Then, the calendar drops down enabling the users to select a specific date.

The rationale behind this pattern is in the calendar metaphor, one that is practically universal and easily understandable.

Some guidelines

General guidelines regarding the implementation of this specific UX pattern are fairly simple. Mark the current date on the calendar and by default display the current months. Of course, be sure to allow users to select different dates. However, you might want to limit their ability to select dates in the past depending on your particular functionality being implemented in the application itself.

This specific control implementation in Silverlight is well done. There are arrows enabling you to jump backwards and forwards for months and selecting the specific date closes the calendar part and the date is then represented and shown in the text box. The specific date format being displayed depends on your locale settings and properties set for the specific control, as explained in the recipe.

Please note that confident and experienced users might wish to enter dates directly into the text box part, especially if dates occur far in the past or future, so clicking through the calendar might be somewhat ineffective.

Also, take into account that this specific pattern is best used with mouse-oriented users. Navigating through the calendar, though it is supported, is not quite the easiest and fastest way to get around with this control.

One thing to consider is regarding the locale of your users and the display of the information on the calendar part. More on that can be found in the following recipe regarding the usage and implementation of the calendar interface itself.