Chapter 7

X
Form1

Sretch

You clcked the78,82

Figure 7.15: Creating an Image Map with a Picture Box

The MonthCalendar Control
The MonthCalendar control allows you to select a date visually. You can limit the
setting the MinDate and MaxDate properties. When a new date is selected, a date that can be selected y
when the date is changed, a DateChanged event occurs. You can use the DateSelected event occurs, and
SelectionRange property of the
MonthCalendar control to determine the range of the date, such as from 11/2/ 2011 to 20/2/2011.
Following is the class hierarchy for the MonthCalendar class:
System. object
System. Marshal ByRefobject
System. ComponentModel.Component
System.windowS. Forms. Control
System.Windows. Forms.MonthCalendar
Table 7.7 lists the noteworthy properties of the
MonthCalendar class:
Table 7.7: Noteworthy Properties of the
MonthCalendar Class
Property Description
AnnuallyBoldedDates Obtains an array of DateTime objectsispecifying which days should be displayed in bold
BackColor Obtains or sets the background color for the control
BackgrOundImage Obtains or sets the background image for the MonthCalendar control
BackgroundImageLayout
BoldedDates
ObBains or sets the value that indicates the lavout for the background imag°
Obtains or sets an array of DateTime objects specifying which dates should be bold
CalendarDimensions Obtains or sets the number of the month in a
MonthCalendar
control columns and rows of

FirstDayOfWeek Obtains or sets the first day of the week

ForeColor
Obtains or sets the foreground color of the
ImeMode control
Obtains or sets the IME mode
MaxDate supported by this control calendar control
Obtains or sets the
MaxSelectionCount maximum date that can be selected for a month
MinDate
Holds the maximum number of days
that can be selected
Obtains or sets the minimum date that calendar control in
MonthlyBo ldedDates can be selected for a month display
Holds the array of days to
bold DateTime specify which monthly
objects which its
Padding control and
Obtains or sets the space MonthCallendar
contents between the edges of the
RightToLe ft Layout toleft
Obtains or sets the value from right
260
indicating whether the control is laid out
 Windows Forms Controls - IlI|

Noteworthy Properties of the Month Calendar Class

Table7.7:
Descriptlon
Property
ScrollChange Obtains the scroll rate of a MonthCalendar control
SelectionEnd Obtains or sets the end date of a selected range
selectionRange Obtains the selected range of dates for a MonthCalendar control
SelectionStart Obtains or sets the starting date of a selected range of dates
ShowToday Obtains or sets the value indicating whether the today's date is shown at the bottom of the
control

ShowTodayCircle Obtains or sets a value indicating whether the month calendar control displays week
numbers
SingleMonthSize Returns the minimum size to display a month
Obtains or sets the size of the MonthCalendar control
Size
Text
Obtains or sets the text to be displayed on the MonthCalendar control
TitleBackColor Obtains or sets the back color of the title area of the calendar
TitleForeColor Obtains or sets the fore color of the title area of the calendar

TodayDate Obtains or sets today's date

TodayDateSet Gets a value indicating whether the TodayDate property has been explicitly set
TrailingForeColor Obtains or sets a value that indicates the color of the days of the previous and following
months that appear on the control

Table 7.8 lists the noteworthy methods of the MonthCalendar class:

Table 7.8: Noteworthy Methods of the MonthCalendar Class
Methods Description
style
AddAnnuallyBolde dDate Adds a day, incremented annually, and displays it in bold font
AddBoldedDate Adds a day and displays it in bold font style
bold fond style
AddMonthlyBoldedDate Adds a day, incremented monthly, and displays it in
Obtains the date information that specifies the range of displayed dates
GetDisplayRange
HitTest Determines the element of the calendar at the specified
location
Removes all annually bolded dates
RemoveAllAnnuallyBoldedDates Removes all nonrecurring bolded dates
RemoveAllBoldedDates
Removes all monthly bolded dates
RemoveAllMonthlyBoldedDates Removes the specified date from the calendar's
intermal list of annually bolded
RemoveAnnuallyBoldedDate dates
list of nonrecurring dates to display
Removes a date from the calendar's internal
RemoveBoldedDate in bold
list of monthly dates to display in
Removes a date from the calendar's internal
RemoveMonthlyBoldedDate bold
columns and rows of months
SetCalendarDimensions
SetDate
Sets the number of
Sets the selected date
given range of dates
Sets the selected dates to the
SetSrelingectionRange
ToSt Returns the string that
represents the MonthCalendar

Redisplays the bolded dates

control

UpdateBoldedDates
261
 Chapter 7

Table 7.9 lists the noteworthy events of the MonthCalendar class:

Table 7.9: Noteworthy Events of the Month Calendar Class
Events Description
BackgroundImageChanged Occurs when the value of the
BackgroundInageLayout Changed Occurs when the value of the BackgroundImageproperty changes
Click

DataChanged
DateSelected
Occurs when the user clicks the
Occurs when the date in the calendar
BackgroundImageLayout property changes
MonthCalendar control
control changes
Occurs when a date is selected in the calendar
DoubleClick Occurs when the user double-clicks the
IneModeChanged Occurs when the ImeMode property changes MonthCalendar control
MouseClick Oocurs when the user clicks the
MouseDoubleClick Occurs when the user
MonthCalendar control with the mo
mouse
double-clicks the MonthCalendar control with
the
PaddingChanged Occurs when the Padding property changes
Paint
Occurs when the control is redrawn
RightToLe ftLayoutChanged Occurs when the value of the RightToLe
TextChanged Occurs when the value of the Text property
ftLayout
property changes
changes
The DateTimePicker Control
The DateTimePicker control is used to display the date
and time. You can select the date from the
DateTimePicker control by clicking the arrow button in this control, it displays a month
select the date from the displayed calendar by clicking calendar. You can
selected date display in the text box part of the the required date. Once you select the date, the
DateTimePicker
You can limit the date and time that can be selected in a control, and a ValueChanged event raIse.
Maxbate properties. You can even change the look ofDateTimePicker control by setting the MinDate anu
the control by setting the
CalendarFont, CalendarTitleBackColor, CalendarForeColor, and

CalendarMonthBackground properties. CalendarTitleForeColor, CalendarTrailingForeColor,

Following the class hierarchy for the
is
System.0bject DateTimePicker class:
System.Marshal ByRefobject
System.ComponentModel.Component
System.windows.Forms . Control
Table 7.10 lists the noteworthy System.windowS. Forms .DateTimePicker
Table
properties of the DateTimePicker class:
7.10: Noteworthy Properties of the
Property DateTimePicker Class
Description
MaximumDateTime control. Note
that this
Specifies the maximum date value of the DateTime Picker
field is read-only.
MiniumDateTime control. Note
that this
Specifies the minimum date value of the DateTimePicker
field is read-only.
BackColor DateTime
Picker
Obtains or sets the value
control. indicating the background color of the
BackgroundImage Obtains or sets the background image for the DateTime Picker control. imePicker
BackgroundImageLayout Obtains or sets the layout of the image of the
Dateti

CalendarFont control background

Obtains orsets the font style for the
calendar.
262
 Windows Forms Controls - IH

Noteworthy Properties of the Date TimePicker Class

Table 7.10: N
Description
Property
Calendar ForeColor Obtains or sets the foreground color of the calendar.
CalendarMonthBackground Obtains or sets the background color of the calendar month.
CalendarTitleBackColor Obtains or sets the background color of the calendar title.
CalendarTitleForeColor Obtains or sets the foreground color of the calendar trailing dates.
CalendarTrai lingForeColor Obtains or sets the foreground color of the calendar trailing dates.
Checked Obtains or sets whether the Value property holds a valid date-time value.
CustomFormat Obtains or sets a custom date-time format string.
DropDownAlign Obtains or sets the alignment of the drop down calendar on the DateTimePicker
control.
ForeColor Obtains or sets the foreground color of the DateTimePicker control.
Obtains or sets the format of dates and times.
Format
MaxDate Obtains or sets the maximum selectable date and time.
MinDate Obtains or sets the minimum selectable date and time
Padding Obtains or sets the spacing between the contents of the DateTime Picker control.
PreferredHe ight Holds the preferred height of the DateTime Picker control.
RightToLe ftLayout Specifies whether the contents of the DateTimePicker control are laid out from
right to left.
ShowCheckBox Specifies whetheracheck box should appear to the left of aselected date.
ShowUpDown Specifies whether an up-down control should be used to adjust date-time values.
Text Obtains or sets the text to be displayed in control.
Value Obtains or sets the date-time value.

Table 7.11 lists the noteworthy methods of the DateTimePicker class:

Table 7.11: Noteworthy Methods of the DateTimePicker Class
Methods Description
ToString Returns the string that represents the current DateTimePicker control

Table 7.12 lists the e noteworthy events of the DateTimePicker clas:

Table 7.12:
Events
Noteworthy Events of the DateTimePicker Class
Description

BackColorChanged
BackgroundImage Changed
Occurs when the value of the BackColor property is changed
Occurs when the BackgroundImage property is changed
Eackground Image LayoutChanged Occurs when the value of the BackgroundImageLayout property changes
Click Occurs when a user clicks the control

CloseUp Occurs when the user is finished selecting the date from the drop-down
calendar

DropDown Occurs when the drop-down calendar appears

EorEormeColatCohanged
rChanged Occurs when the value of the ForeColor property is changed on the control
Occurs when the value of the Fo rmat property changes
MouseClick Occurs when a user clicks the control with the mouse

Mous
PaddineDoubl
gChangedeClick
Occurs when a user double-clicks the control with the mouse
Occurs when the value of the Padding property is changed

263
Chapter7

Table 7.12: Noteworthy Events of the DateTimePicker Class

Events Description
BaLnt Ocurs on redrawing the control
RightToLeftiayoutChange Ocurs when the Right ToLeftLayout property is
TextChaniged Ocurs when the value of the Text property is changed
changed
ValueChanged Occurs when the value of control changes
As you leaned earlier, the MonthCalendar control to allow the user to select days of a
new month, and the
DateTimePhcker control to allow the user to select both date and time. Let's create a
application named MonthCalendarAndDateTimePicker (also available in the CD),
the Month Calendar and DateTimePicker controls. Then, add a to learn how to
workForms Windows
MonthCalendar
control. a TextBoN COntrol and two Button controls from the Toolbox to the control, a with
property of the two Button controls to Setting a Date in Date Time Picker andForm
Retrieving
designer
a Date
DatesetTimtheePickerText
and
from Date Time
Pcker respectively, as shown in Figure 7.16:
Mioesah Vual Studio

Da Tools A c c Tst Anah Wndons Help

Deb

Fernl
Properties
Ppyn Forml Systen Wndows
Racn Fo
A21s
Se 473, 355
February. 2011 Frday Februay 11, 2011D SzeGy Aute
Sun Mon Tue Wed Thu Fe Sat StartPe WndowsDe
1 2 Tae
6 Seing a Date in Date Time Plder Tat Forml
9 10 12
3 4 15 16 17 18 19
24 Text
The tert usociated with
Retavrg a Dote frum Dte Trme the control
Teday 211/2011
Sohution Exrloret

Sohuton MoathCalend
4Month CalendarA
SnpC My Project
EForml vb
Tadar
Toei

Figure 7.16: Showing the Design View of the

DateTimePickerControl Application
Now, using the DateTimePickerControl application, you need to perform the following three tas
O Handling the events of the
MonthCalendar control
Setting and retrieving adate using the
O Specifying the format for DateTimePicker control
DateTimePicker controls
Handling the main eventsofinMonthCalendar
There are two Events ControlDateChanged (the default
MonthCalendar controls- event), which occurs when
the
the date in the control changes OCCurs when
user selects a new date. (either through user actions or in code); and DateSelected, which
As you have learned handlesuch
earlier, you can select the entire range of dates in To
control.MonthCalendar
range, you can use the SelectionStart, MonthCalendar
SelectionEnd, and SelectionRange
control. To handle the DateSelected event of the MonthCCalendar properties of the
control, perform the following steps:

264
 Windows Forms Controls- Il|

Generatethe DateSelected event of the MonthCalendar control and add the following code snippet in the
1
monthCalendar1 DateSelected event:
Private Sub McMonthcal1endarl1_DateSelected (ByVal sender As System.object, Byval e As
windows. Forms..DateRangeEventArgs) Handles Monthcalendarl.Dateselected
System.TextBOx1. Text ="Days of month selected: "8
Monthcallendar1. selecti onRange.Start. Day
End Sub
we are displaying the selected date in a text box, when the user selects a date on
preceding code snippet,runtime.
Inthe control at
the MonthCalendar month is
the application and select a date on the MonthCalendar control. The day of the selected
Figure 7.17:
displayed in the text box,as shown in
3

B Form1

Fnday February 11. 2011

February, 2011
Sun Mon Tue Wed Thu Fn Sat
30 31 1 2 3 4 Seting a Date in Dte Tme Per
6 7 9 10 11 12
13 14 15 16 17 18 19
20 23 24 25 26
27 28 3 4 Retnevng a Date from Date Tme
10 11 12
Today: 2/1/2011

Days of morth selecded, 22

Figure 7.17: Selecting a Date in the MonthCalendar Control

Setting and Retrieving a Date Using Date TimePicker Control

You can set adate in the DateTimePicker control and retrieve the date from the DateTimePicker control using
the Value property of this control. To set or retrieve a date using the DateTimePicker control, perform the
following
1
steps:
Double-click the Button control, Buttonl, on the Form designer to open the Code window and add the
tollowing code snippet on the Button1_Click event:
Private Sub Buttonl_click (ByVal sender As system.object, Byval e As System. EventArgs)
Handles Buttonl.click
End Sub DateTimePicker1l.Value = NewDateTime (2011, 5, 25)
In the preceding code snippet, we are setting a date, May25, 2011 in the DateTimePicker control using its Value
property, when the user clicks the Button control, Buttonl, at runtime.
2. Double-click the Button control, Button2,, on the Form designer to open the Code window and add the
following code snippet on the Button2_Click event:
Private Sub Button2_Click(ByVal sender As system.object, Byval e As System.EventArgs)
Handles Button2.Click
End Sub MsgBox (Datetimepickerl.value.ToString 0)
In the preceding code Snippet, we are retrieving and displaying the date of the DateTimePicker control in a
message box, when the user clicks the Button control, Button2, at runtime.
3. Press the F5 key on the keyboard to run the application and click the Setting a Date in Date Time Picker
button. This sets a date, May25, 2011, in the date time picker, as shown in Figure 7.18:

265
Chapter 7

February 20L1 Wedesdy May 25, 2011

Sun Mon Tue Wed Thu Fn Sat
1
618 9 10 11 12 Setng a Deyn Date Tme Pcker
314 15 16 17 18 19
2 22 23 24 25
23
9 10 11 Retnevng a Date from Date Time
Todey 211/2011

Figure 7.18: Setting a Date in the DateTimePicker Control

4 Cik the Retrieving a Date from Date Time Picker button. This displays the
date of the date time nickor ix
message box, as shown in Figure 7.19:
Form

February, 2011 Wednesday May 25, 2011 -

Sun Mon Tue Wed Thu Fn Sat
1 2 3 4
Setting a Date in Date Time Picker
8 9 1011 12
13 14 15 16 17 18 19
30 21 22 23 24 25 26
27 28 1 2 3 4
8 9 10 11 Retneving a Dale from Date Time
Tody 2/11/2011
MonthCalendarAnd DateTimePic.

5/25/2011 12-00-00 AM

OK

Figure 7.19: Retrieving the Date of the DateTimePicker Control

Specifying the Format for
DateTimePicker
You can set the format for the date and time displayedControls
in the DateTimePicker control to customizethe fomat
format,
according to yourrequiremernt.For example,
you can both. To set a custom
set the Format property of the DateTimePicker control
displayto only adate, time, or
Custom, and then you assign a custom format stringto
the CustomFormat property. You create a
custom
d-Represents the one-or two-digit day format string using the followng e
dd- Represents the two-digit day. Note that single-digit day values are preceded by azero
ddd- Represents the
O dddd- three-character
Represents the full day-of-weekday-of-week abbreviation
name
h-Represents the one- or two-digit hour in
hh- Represents the two-digit 12-hour format precededbya
zero

H- Represents the one- or hour in 12-hour format. Note that single-digit values are zero
HH- Represents the two-digit hour in 24-hour format precededbya
two-digit hour in 24-hour format. Note that single-digit values are
m- Represents the one- or
two-digit minute
mm- Represents the two-digit minute. Note that single-digit values are preceded bya zero

266