Home

.NET Controls: The Date Picker

 

Overview of the Date Picker

 

Introduction

The Date and Time Picker is a control that allows the user to select either a date or a time value. This control provides two objects in one:

One of the advantages of the Date and Time Picker control is that it allows the user to select a time or a date value instead of typing it. This tremendously reduces the likelihood of mistakes.

 

Creating a Date Picker

To support the Date Picker control, the .NET Framework provides the DateTimePicker class. To create a Date Picker, declare a DateTimePicker variable, use the new operator to initialize it and call the Controls.Add() method to add the control to its container. In reality, the DateTimePicker control can be considered as two controls in one: you just have to choose which one of both controls you want to use. After adding the DateTimePicker control to a container, to allow the user to set the dates and not the times on the control, set its Format property either to Long or Short. Here is an example:

using System;
using System.Drawing;
using System.Windows.Forms;

class Exercise : Form
{
	DateTimePicker dtpDate;

	public Exercise()
	{
		this.InitializeComponent();
	}

	private void InitializeComponent()
	{
		dtpDate = new DateTimePicker();
		dtpDate.Location = new Point(10, 10);

		this.Controls.Add(dtpDate);
	}

	static int Main()
	{
		Application.Run(new Exercise());
		return 0;
	}
}
  

Characteristics of the Date Picker

 

The Format of the Date

After adding a DateTimePicker control and setting its Format to either Long (the default) or Short, the control becomes a combo box (the default).

 

The UpDown Part of the Date Picker

If you do not like the combo box, you can display a spin button instead. This characteristic is controlled by the ShowUpDown Boolean property. When its value is set to false (the default), the control appears as a combo box. It you set it to True, it appears as a spin button:

 

The Drop-Down Alignment of the Calendar Part

If the control displays a combo box and if the user clicks the arrow on the Date control, a calendar object similar to the MonthCalendar control displays:

This calendar displays to the bottom-left or the bottom-right side of the combo box. To control this alignment, change the value of the DropDownAlign property whose default value is Left. The other value is Right.

The displayed MonthCalendar object allows the user to select a date using the same techniques of the MonthCalendar control. The MonthCalendar part of the DateTimePicker control displays using the same colors and other properties as the MonthCalendar control. After the user has selected a date, the date value displays in the text box section of the combo box and the calendar disappears.

 

A Check Box for the Control

In some cases, you may want to decide when to allow the user to select a date or when to disable it. There are two ways you can do this. You can use the Control's Enabled property that all other controls inherit. Another technique you can use is to display a check box on the left side of the text box section of the control. The presence or absence of the check box is controlled by the ShowCheckBox Boolean property whose default value is False. If you set it to true, a check box appears:

When the check box is checked, the user can change the displayed date. When the check box is unchecked, the control is displayed and the user cannot change the date. The user must first put a check mark in the check box in order to be able to change the date.

If the control displays a spin button, the object is divided in different sections that can each be changed individually. To change either the day, the month, or the year, the user must click the desired section and use either the arrows of the button or the arrow keys on the keyboard to increase or decrease the selected value.

The Range of Allowed Dates

 

If you want to control the range of dates the user can select, use the MinDate and the MaxDate properties as we mentioned them from the MonthCalendar control.

The Value of the Control

 

When you add the DateTimePicker control to your form or container, it displays the date of the computer at the time the control was added. If you want the control to display a different date, assign the desired date to Value property. At any time, you can find out what value the Date Picker has by retrieving the value of the Value property.

Custom Date Formats

 

If you set the Format property to Long, the date displays using the Long Date formats of Control Panel. If you set the Format to Short, the control uses the Short Date value of Control Panel. If you want to customize the way the date is displayed, set the Format property to Custom. After setting the Format to Custom, use the CustomFormat property to create the desired format. The format is created by combining the following characters:

Format Used For Description
d Days Displays the day as a number from 1 to 31
dd Days Displays the day as a number with a leading 0 if the number is less than 10
ddd Weekdays Displays a weekday name with 3 letters as Mon, Tue, etc
dddd Weekdays Displays the complete name of a week day as Monday, etc
M Months Displays the numeric month from 1 to 12
MM Months Displays the numeric month with a leading 0 if the number is less than 10
MMM Months Displays the short name of the month as Jan, Feb, Mar, etc
MMMM Months Displays the complete name of the month as January, etc
yy Years Displays two digits for the year as 00 for 2000 or 03 for 2003
yyyy Years Displays the numeric year with 4 digits

This means that you should be reluctant to let the users type whatever they want. The less they type, the less checking you need to do.

 

Events of the Date Picker

 

The Value Has Changed

 

Whenever the user changes the date or time value of the control, a ValueChanged event fires. You can use this event to take some action such as indicating to the user that the new date is invalid.

 

Drop Down

 

If the Format property of the control is set to Date and if the ShowUpDown property is set to False, when the user clicks the arrow of the combo box to display the MonthCalendar part of the DateTimePicker control, the DropDown event fires.

 

Close Up

 

On the other hand, if the user clicks the arrow to retract the calendar, an CloseUp event fires. Both events are of EventArgs type.

 

Home Copyright 2004 FunctionX, Inc.