Displaying Dates: Using MonthCalendar and DateTimePicker Controls

In this lesson, you will learn how to display the date on a Windows Form. You will also learn how to perform an action when a user selects a date.

When you use a control that displays a calendar, it's easy for users to select a date. The use of these controls also ensures that the date is formatted correctly. You can display a calendar with a MonthCalendar control or a DateTimePicker control.

The MonthCalendar control lets you display a calendar for one or more months. Users can select a single date or a range of dates if you use this control.

The DateTimePicker control has two states. By default, the DateTimePicker control appears as a text box together with a drop-down arrow. When the user clicks the drop-down arrow, a calendar appears. The user can select only a single date if you use this control. The DateTimePicker control also enables you to display times instead of dates.

The process used to retrieve a date from these controls varies depending on the control used. Use the Start property for a MonthCalendar control, and use the Value property for a DateTimePicker control.

Try It!

To retrieve a date and display it in a label

1. On the File menu, click New Project.

   The New Project dialog box appears.

2. Click Windows Forms Application and then click OK.

3. Add a Label control to the form, leaving the default name Label1.

4. Remove the text from the Text property of the Label control.

5. Add a MonthCalendar control to the form, leaving the default name MonthCalendar1.

6. Double-click the MonthCalendar control to enter the default event handler in the Code Editor.

7. In the MonthCalendar1_DateChanged event handler, add the following code to add items to the list.

   Me.Label1.Text = CStr(Me.MonthCalendar1.SelectionRange.Start)
   

8. Return to Designer view and add a DateTimePicker control to the form, leaving the default name DateTimePicker1.

9. Double-click the DateTimePicker control to enter the default event handler in the Code Editor.

10. In the DateTimePicker_ValueChanged event handler, add the following code to add items to the list.

    Me.Label1.Text = CStr(Me.DateTimePicker1.Value)
    

11. Press F5 to run the program.

12. When the form appears, click a date in the MonthCalendar control and verify that the date is displayed in the label.

13. Click the drop-down arrow of the DateTimePicker control and select a date.

    The date and time are displayed in the label.

14. Close the program.

Retrieving Multiple Dates

You can retrieve a range of dates that are selected in a MonthCalendar control by using the Start and End properties of the SelectionRange. By default, the maximum number of days that can be selected is seven, but you can change this by setting the MaxSelectionCount property. You can determine whether a range is selected by checking whether the start and end date are equal.

To retrieve a range of dates from a month calendar control

1. Change the code in the MonthCalendar1_DateChanged event handler to the following code. This code sets the maximum number of days (two weeks) that can be selected in the control. It displays the start date in the label if only one day is selected, but it displays a range of dates when a range is selected in the MonthCalendar control.

   Me.MonthCalendar1.MaxSelectionCount = 14
   
   If Me.MonthCalendar1.SelectionRange.Start = 
       Me.MonthCalendar1.SelectionRange.End Then
   
       Me.Label1.Text = CStr(Me.MonthCalendar1.SelectionStart)
   
   Else
   
       Me.Label1.Text = Me.MonthCalendar1.SelectionRange.Start & 
           " - " & Me.MonthCalendar1.SelectionRange.End
   
   End If
   

2. Press F5 to run the program.

3. When the form appears, select a range of dates in the MonthCalendar control and verify that the range of dates appears in the label.

4. Close the program.

Formatting Dates

You can format the dates returned by the MonthCalendar control and the DateTimePicker control by using the FormatDateTime function. There are several constants that you can use to indicate the format of the date:

Constant	Description	Example (based on default U.S. English regional settings)
DateFormat.GeneralDate	Display a date, a time, or both. If there is a date, display it as a short date. If there is a time, display it as a long time. If present, both parts display.	11/22/1963 12:00:00 PM
DateFormat.LongDate	Display a date in the long date format that is specified in your computer's regional settings.	Friday, November 22, 1963
DateFormat.ShortDate	Display a date in the short date format that is specified in your computer's regional settings.	11/22/1963
DateFormat.LongTime	Display a time in the long time format that is specified in your computer's regional settings.	12:00:00 PM
DateFormat.ShortTime	Display a time in the 24-hour format (hh:mm).	12:00

To format the date in the label

1. Change the code in the MonthCalendar1_DateChanged event handler to the following code. This code formats the date returned as a long date.

   Me.MonthCalendar1.MaxSelectionCount = 14
   
   If Me.MonthCalendar1.SelectionRange.Start = 
       Me.MonthCalendar1.SelectionRange.End Then
   
       Me.Label1.Text = FormatDateTime( 
           Me.MonthCalendar1.SelectionStart, 
           DateFormat.LongDate)
   Else
       Me.Label1.Text = FormatDateTime( 
           Me.MonthCalendar1.SelectionRange.Start, 
           DateFormat.LongDate) & " - " & FormatDateTime( 
           Me.MonthCalendar1.SelectionRange.End, DateFormat.LongDate)
   End If
   

2. Change the code in the DatePicker1_ValueChanged event handler to the following code. This code formats the date returned as a long date.

   Me.Label1.Text = FormatDateTime(Me.DateTimePicker1.Value, 
       DateFormat.LongDate)
   

3. Press F5 to run the program.

4. When the form appears, click a date or range of dates in the MonthCalendar control. Verify that the date or range of dates appears in the long date format in the label.

5. Click a date in the DateTimePicker control and verify that the date in the label appears as a long date.

6. Close the program.

Next Steps

In this lesson, you learned how to retrieve dates selected in MonthCalendar and DateTimePicker controls and display them on a Windows Form. You also learned how to display a range of dates, and how to format the dates retrieved. In the next lesson, you'll learn how to use data controls.

Next Lesson: Data Controls: Displaying Data in DataGridView Controls

See Also

Reference

DateTimePicker Control Overview (Windows Forms)

MonthCalendar Control Overview (Windows Forms)

Other Resources

Creating the Visual Look of Your Program: Introduction to Windows Forms

FormatDateTime Function (Visual Basic)