Home

Windows Controls: The Time Picker

  

Introduction to the Date/Time Picker

 

Description

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:

 

Practical LearningPractical Learning: Introducing the Date Picker

  1. Start Microsoft Visual Studio
  2. To start a new application, on the main menu, click File -> New Project...
  3. In the middle list, click MFC Application and change the Name to SimpleInterest1
  4. In the first page of the wizard, click Next
  5. In the second page of the wizard, click Dialog Based and click Next
  6. Click Finish

Creating a Date/Time Picker

To create a Date or Time Picker control, add a date/time picker to a dialog box or a form. The date/time picker is implemented by a class named CDateTimeCtrl, which is derived from CWnd. To programmatically create a date/time picker, declare CDateTimeCtrl variable and use its Create() member function to initialize it. The syntax of this member function is:

virtual BOOL Create(DWORD dwStyle,
   		    const RECT& rect,
   		    CWnd* pParentWnd,
   		    UINT nID);

Here is an example of calling it:

BOOL CExerciseDlg::OnInitDialog()
{
    CDialogEx::OnInitDialog();

    // Set the icon for this dialog.  The framework does this automatically
    //  when the application's main window is not a dialog
    SetIcon(m_hIcon, TRUE);			// Set big icon
    SetIcon(m_hIcon, FALSE);		// Set small icon

    // TODO: Add extra initialization here
    CDateTimeCtrl * ctrlDateHired = new CDateTimeCtrl;

    ctrlDateHired->Create(WS_CHILD | WS_VISIBLE,
	                  CRect(10, 10, 200, 35),
		  	  this,
			  IDC_DATE_HIRED);

    return TRUE;  // return TRUE  unless you set the focus to a control
}

This would produce:

Date - Time Picker Control


Introduction to the Time Picker

 

Description

After adding a date/time picker to a dialog box, to visually make it a timer picker control, in the Properties window, change its Format field to Time. This changes the control into a spin control:

Date - Time Picker Control

To programmatically change a CDateTimeCtrl object into a time picker, add the DTS_TIMEFORMAT style. Here is an example:

BOOL CExerciseDlg::OnInitDialog()
{
    CDialogEx::OnInitDialog();

    // Set the icon for this dialog.  The framework does this automatically
    //  when the application's main window is not a dialog
    SetIcon(m_hIcon, TRUE);			// Set big icon
    SetIcon(m_hIcon, FALSE);		// Set small icon

    // TODO: Add extra initialization here
    CDateTimeCtrl * ctrlStartTime = new CDateTimeCtrl;

    ctrlStartTime->Create(WS_CHILD | WS_VISIBLE | DTS_TIMEFORMAT,
                          CRect(15, 15, 100, 35),
	    	          this,
			  IDC_START_TIME);

    return TRUE;  // return TRUE  unless you set the focus to a control
}

Practical LearningPractical Learning: Creating a Time Picker Application

  1. Start Microsoft Visual Studio
  2. To start a new application, on the main menu, click File -> New Project...
  3. In the middle list, click MFC Application and change the Name to GeorgetownDryCleaningServices1
  4. In the first page of the wizard, click Next
  5. In the second page of the wizard, click Dialog Based and click Next
  6. Click Finish
  7. Design the dialog box as follows:
     
    Georgetown Dry Cleaning Services
     
    Control Caption ID Additional Properties
    Group Box Group Box Order Identification    
    Static Text Static Text C&ustomer Name:    
    Edit Box Edit Control   IDC_CUSTOMER_NAME  
    Static Text Static Text Customer &Phone:    
    Edit Box Edit Control   IDC_CUSTOMER_PHONE  
    Static Text Static Text &Date Left:    
    Date Time Picker Date Time Picker   IDC_DATE_LEFT  
    Static Text Group Box &Time Left:    
    Date Time Picker Date Time Picker   IDC_TIME_LEFT Format: Time
    Static Text Static Text Date Expected    
    Date Time Picker Date Time Picker   IDC_DATE_EXPECTED  
    Static Text Static Text Time Expected    
    Date Time Picker Date Time Picker   IDC_TIME_EXPECTED Format: Time
    Static Text Static Text Date Picked Up    
    Date Time Picker Date Time Picker   IDC_DATE_PICKED_UP  
    Static Text Static Text Time Picke&d Up:    
    Date Time Picker Date Time Picker   IDC_TIME_PICKED_UP Format: Time
    Group Box Group Box Order Processing    
    Static Text Static Text Item Type    
    Static Text Static Text Unit Price    
    Static Text Static Text Qty    
    Static Text Static Text Sub-Total    
    Static Text Static Text Shirts    
    Edit Box Edit Control   IDC_UNITPRICE_SHIRTS  
    Edit Box Edit Control   IDC_QUANTITY_SHIRTS  
    Edit Box Edit Control   IDC_SUBTOTAL_SHIRTS  
    Static Text Static Text Pants    
    Edit Box Edit Control   IDC_UNITPRICE_PANTS  
    Edit Box Edit Control   IDC_QUANTITY_PANTS  
    Edit Box Edit Control   IDC_SUBTOTAL_PANTS  
    Combo Box Combo Box   IDC_ITEM1 Data:
    None;Tie;Coat;Dress;Other;
    Jacket;Swede;Silk Shirt;
    Sweater;Comforter;
    Women Suit;Regular Skirt;
    Men's Suit 2Pc;
    Men's Suit 3Pc;Skirt With Hook
    Edit Box Edit Control   IDC_UNITPRICE_ITEM1  
    Edit Box Edit Control   IDC_QUANTITY_ITEM1  
    Edit Box Edit Control   IDC_SUBTOTAL_ITEM1  
    Combo Box Combo Box   IDC_ITEM2 Data:
    None;Tie;Coat;Dress;Other;
    Jacket;Swede;Silk Shirt;
    Sweater;Comforter;
    Women Suit;Regular Skirt;
    Men's Suit 2Pc;
    Men's Suit 3Pc;Skirt With Hook
    Edit Box Edit Control   IDC_UNITPRICE_ITEM2  
    Edit Box Edit Control   IDC_QUANTITY_ITEM2  
    Edit Box Edit Control   IDC_SUBTOTAL_ITEM2  
    Combo Box Combo Box   IDC_ITEM3 Data:
    None;Tie;Coat;Dress;Other;
    Jacket;Swede;Silk Shirt;
    Sweater;Comforter;
    Women Suit;Regular Skirt;
    Men's Suit 2Pc;
    Men's Suit 3Pc;Skirt With Hook
    Edit Box Edit Control   IDC_UNITPRICE_ITEM3  
    Edit Box Edit Control   IDC_QUANTITY_ITEM3  
    Edit Box Edit Control   IDC_SUBTOTAL_ITEM3  
    Combo Box Combo Box   IDC_ITEM4 Data:
    None;Tie;Coat;Dress;Other;
    Jacket;Swede;Silk Shirt;
    Sweater;Comforter;
    Women Suit;Regular Skirt;
    Men's Suit 2Pc;
    Men's Suit 3Pc;Skirt With Hook
    Edit Box Edit Control   IDC_UNITPRICE_ITEM4  
    Edit Box Edit Control   IDC_QUANTITY_ITEM4  
    Edit Box Edit Control   IDC_SUBTOTAL_ITEM4  
    Group Box Group Box Order Summary    
    Button Button C&alculate IDC_CALCULATE  
    Static Text Static Text Cleaning Total:    
    Edit Box Edit Control   IDC_CLEANING_TOTAL Align Text: Right
    Static Text Static Text Tax Rate:    
    Edit Box Edit Control   IDC_TAX_RATE Align Text: Right
    Static Text Static Text %    
    Static Text Static Text Tax Amount    
    Edit Box Edit Control   IDC_TAX_AMOUNT Align Text: Right
    Static Text Static Text Net Price:    
    Edit Box Edit Control   IDC_NET_PRICE Align Text: Right
    Button Button &Close IDCANCEL  
  8. Right-click each of the edit controls and date time picker, and click Add Variable...
  9. Create the variables as follows:
     
    ID
    Category Type Name
    IDC_CUSTOMER_NAME Value CString m_CustomerName
    IDC_CUSTOMER_PHONE Value CString m_CustomerPhone
    IDC_DATE_LEFT Value CTime m_DateLeft
    IDC_TIME_LEFT Value CTime m_TimeLeft
    IDC_DATE_EXPECTED Value CTime m_DateExpected
    IDC_TIME_EXPECTED Value CTime m_TimeExpected
    IDC_DATE_PICKED_UP Value CTime m_DatePickedUp
    IDC_TIME_PICKED_UP Value CTime m_TimePickedUp
    IDC_UNITPRICE_SHIRTS Value double m_UnitPriceShirts
    IDC_QUANTITY_SHIRTS Value int m_QuantityShirts
    IDC_SUBTOTAL_SHIRTS Value double m_SubTotalShirts
    IDC_UNITPRICE_PANTS Value double m_UnitPricePants
    IDC_QUANTITY_PANTS Value int m_QuantityPants
    IDC_SUBTOTAL_PANTS Value double m_SubTotalPants
    IDC_ITEM1 Value CString m_Item1
    IDC_UNITPRICE_ITEM1 Value double m_UnitPriceItem1
    IDC_QUANTITY_ITEM1 Value int m_QuantityItem1
    IDC_SUBTOTAL_ITEM1 Value double m_SubTotalItem1
    IDC_ITEM2 Value CString m_Item2
    IDC_UNITPRICE_ITEM2 Value double m_UnitPriceItem2
    IDC_QUANTITY_ITEM2 Value int m_QuantityItem2
    IDC_SUBTOTAL_ITEM2 Value double m_SubTotalItem2
    IDC_ITEM3 Value CString m_Item3
    IDC_UNITPRICE_ITEM3 Value double m_UnitPriceItem3
    IDC_QUANTITY_ITEM3 Value int m_QuantityItem3
    IDC_SUBTOTAL_ITEM3 Value double m_SubTotalItem3
    IDC_ITEM4 Value CString m_Item4
    IDC_UNITPRICE_ITEM4 Value double m_UnitPriceItem4
    IDC_QUANTITY_ITEM4 Value int m_QuantityItem4
    IDC_SUBTOTAL_ITEM4 Value double m_SubTotalItem4
    IDC_CLEANING_TOTAL Value double m_CleaningTotal
    IDC_TAX_RATE Value double m_TaxRate
    IDC_TAX_AMOUNT Value double m_TaxAmount
    IDC_NET_PRICE Value double m_NetPrice
  10. Access the source code of the dialog box and initialize some controls as follows:
    CGeorgetownDryCleaningServices1Dlg::CGeorgetownDryCleaningServices1Dlg(CWnd* pParent /*=NULL*/)
    	: CDialogEx(CGeorgetownDryCleaningServices1Dlg::IDD, pParent)
    	, m_CustomerName(_T(""))
    	, m_CustomerPhone(_T(""))
    	, m_DateLeft(0)
    	, m_TimeLeft(0)
    	, m_DateExpected(0)
    	, m_TimeExpected(0)
    	, m_DatePickedUp(0)
    	, m_TimePickedUp(0)
    	, m_UnitPriceShirts(1.25)
    	, m_QuantityShirts(0)
    	, m_SubTotalShirts(0)
    	, m_UnitPricePants(1.95)
    	, m_QuantityPants(0)
    	, m_SubTotalPants(0)
    	, m_Item1(_T(""))
    	, m_UnitPriceItem1(0)
    	, m_QuantityItem1(0)
    	, m_SubTotalItem1(0)
    	, m_Item2(_T(""))
    	, m_UnitPriceItem2(0)
    	, m_QuantityItem2(0)
    	, m_SubTotalItem2(0)
    	, m_Item3(_T(""))
    	, m_UnitPriceItem3(0)
    	, m_QuantityItem3(0)
    	, m_SubTotalItem3(0)
    	, m_Item4(_T(""))
    	, m_UnitPriceItem4(0)
    	, m_QuantityItem4(0)
    	, m_SubTotalItem4(0)
    	, m_CleaningTotal(0)
    	, m_TaxRate(7.75)
    	, m_TaxAmount(0)
    	, m_NetPrice(0)
    {
    	m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME);
    }
  11. Return to the dialog box and double-click the Calculate button
  12. Implement the event as follows:
    void CGeorgetownDryCleaningServices1Dlg::OnBnClickedCalculate()
    {
    	// TODO: Add your control notification handler code here
    	UpdateData();
    	m_SubTotalShirts = m_UnitPriceShirts * m_QuantityShirts;
    	m_SubTotalPants = m_UnitPricePants * m_QuantityPants;
    	m_SubTotalItem1 = m_UnitPriceItem1 * m_QuantityItem1;
    	m_SubTotalItem2 = m_UnitPriceItem2 * m_QuantityItem2;
    	m_SubTotalItem3 = m_UnitPriceItem3 * m_QuantityItem3;
    	m_SubTotalItem4 = m_UnitPriceItem4 * m_QuantityItem4;
    
    	m_CleaningTotal = m_SubTotalShirts + m_SubTotalPants +
    		          m_SubTotalItem1 + m_SubTotalItem2 +
    			  m_SubTotalItem3 + m_SubTotalItem4;
    	m_TaxAmount = m_CleaningTotal * m_TaxRate;
    	m_NetPrice = m_CleaningTotal + m_TaxAmount;
    
    	UpdateData(FALSE);
    }
  13. To execute and preview the dialog box, press F5
  14. Close the dialog box and return to your programming environment
 
 
 

Characteristics of the Time Picker Control

 

Introduction

The time picker control is a spin button made of different sections: the hours value, the minutes value, the optional seconds value, and the optional AM/PM string. To change the time, the user clicks a section and uses either the mouse or the keyboard to increase or decrease that particular value. To change another value, the user must first click it and then use the spin button.

To use the time picker, the user must first give it focus. This is done by clicking either one of the sections of the control or by directly clicking one of the arrows of the spin button portion. You also can programmatically give focus to the control by sending an NM_SETFOCUS message.

Once the control has focus, it is primarily meant to let the user set a time (on the control). To support this, it allows the user to manually edit the time of the control such as typing the hour, the minute, the second, or AM/PM. The time picker control is equipped to natively allow or disallow some values. For example, the user cannot type anything else than a digit for the hours, minutes, or second portions and she can type only a, A, p, or P for the AM/PM section. This is the default scenario where you let this object help you control the values that the user can type. To perform these operations, the user can click the portion to change and then click the arrows of the spin button. When the user changes the value of the control, the time picker fires a DTN_DATETIMECHANGE message.

Instead of using the mouse to change the time, the user can click a portion of the control and press the arrow keys to change the value of that portion. Whenever the user presses one of the arrow keys, the control fires a DTN_WMKEYDOWN message.

After using the time picker control, the user can click somewhere else, which causes the control to loose focus. To programmatically change focus from the control, you can send an NM_KILLFOCUS message.

The Time Format

By default, the time displays using the H:MM:SS AM/PM format. This means that the time uses one digit for the hours from 0 to 9, two digits for the minutes from 00 to 59, two digits for the seconds from 00 to 59 and the AM or PM for morning or afternoon. To control how the time displays, call the CDateTimeCtrl::SetFormat() member function whose syntax is:

BOOL SetFormat(LPCTSTR pstrFormat);

The letters used to set the format for a time value are:

Format Used For Description
h Hour For 12-hour basis: Used to display the hour with one digit if the value is less than 10
hh Hour For 12-hour basis: Used to display the hour with a leading 0 if the value is less than 10
H Hour For 24-hour basis Used to display the hour with one digit if the value is less than 10
HH Hour For 24-hour basis: Used to display the hour with a leading 0 if the value is less than 10
m Minute Used to display the minute with one digit if the value is less than 10
mm Minute Used to display the minute with a leading 0 if the value is less than 10
t AM/PM Displays the letter A or P for the AM or PM section
tt AM/PM Displays the letters AM or PM for the last section

The Time of the Control

By default, after adding the control to the dialog box or container, it assumes the time of the computer when the control was added. If you want to set a different time, call the CDateTimeCtrl::SetTime() member function. It is overloaded with three versions whose syntaxes are:

BOOL SetTime(const COleDateTime& timeNew);
BOOL SetTime(const CTime* pTimeNew);
BOOL SetTime(LPSYSTEMTIME pTimeNew = NULL);

To retrieve the time value on the control, you can call the CDateTimeCtrl::GetTime() member function. It also is overloaded with three versions and their syntaxes are:

BOOL GetTime(COleDateTime& timeDest) const;
DWORD GetTime(CTime& timeDest) const;
DWORD GetTime(LPSYSTEMTIME pTimeDest) const;
 
 
   
 

Home Copyright © 2010-2011 FunctionX, Inc.