A date picker is a control that lets users quickly enter dates in a Microsoft Office InfoPath form by clicking a small pop-up calendar. For example, you can use a date picker to collect birth dates from people on an insurance form. You can also use a date picker to display preset dates, such as the current date.
In this article
When to use a date picker
Use a date picker when you want to:
-
Enable users to enter dates of their choice on a form, such as start and end dates for a particular project.
-
Use the today and now functions to show today's date and time on a form.
-
Display dates from an external data source, such as billing and shipping dates from a database of customer orders.
In the following illustration, a date picker is used on a travel request form template to collect the departure date for a flight.
You can customize the date picker to suit your needs by double-clicking the control on the form template and then changing its properties. For example, you can specify a default date or change the way that the date is displayed on the form.
The user experience
Date pickers look like text boxes, except that a small calendar icon appears on the right side of the box. To open the pop-up calendar, users click the calendar icon. When the calendar appears, users can click the date that they want on the calendar or use the right and left arrow buttons to scroll through the months. If users want to insert the current date, they can click the Today button at the bottom of the calendar.
Compatibility considerations
When you design a form template in InfoPath, you can choose a specific compatibility mode to design a browser-compatible form template. When a browser-compatible form template is published to a server running InfoPath Forms Services, and then browser-enabled, forms based on the form template can be viewed in a Web browser. When you design a browser-compatible form template, some controls are unavailable in the Controls task pane because they cannot be displayed in a Web browser.
Although date pickers are available when you design a browser-compatible form template, be aware of the following limitations:
-
Date pickers are fully supported only in Windows Internet Explorer browsers. In other Web browsers, the date picker appears as a text box, although date formatting options are supported in the text box.
-
Placeholder text is text that appears inside a control on a form template. An example of placeholder text is "Click here and type." Although you can leave placeholder text settings for browser-compatible form templates, that text does not appear in Web browsers.
Insert a date picker
The procedure for inserting a date picker differs slightly depending on whether you are designing a new, blank form template or basing the design of your form template on a database or other external data source.
The following illustration shows how a date picker looks when it is selected in design mode.
Controls can be bound or unbound. When a control is bound, it is connected to a field or group in the data source so that data entered into the control is saved in the underlying form (.xml) file. When a control is unbound, it is not connected to a field or group, and data entered into the control is not saved. When you select or move your pointer over a control, text and a binding icon appear in the upper-right corner of the control. The text indicates the group or field to which the control is bound in the data source. The icon indicates whether the control is correctly bound to that group or field. When the binding is correct, a green icon appears. If there's something wrong with the binding, you'll see a blue or red icon instead.
The data source for the form template consists of fields and groups that appear in a hierarchical view in the Data Source task pane. Date picker controls are always bound to fields. In the following example, the Departure date date picker on the form template is bound to the departureDate field in the Data Source task pane.
Insert a date picker on a new, blank form template
When you design a new, blank form template, the Automatically create data source check box in the Controls task pane is selected by default. This enables InfoPath to automatically create fields and groups in the data source as you add controls to the form template. These fields and groups are represented by folder and file icons in the Data Source task pane.
-
On the form template, place the cursor where you want to insert the control.
-
If the Controls task pane is not visible, click More Controls on the Insert menu, or press ALT+I, C.
-
Under Insert controls, click Date Picker.
-
To add a label to the control, type text above or to the left of the control, followed by a colon (:).
-
To specify the way that the date is displayed on the form, double-click the date picker that was inserted on the form template.
-
Click the Data tab, and then click Format.
-
In the Display the date like this list, in the Date format dialog box, click the display format that you want.
Note: You can change the display format of the date only if the data type is text, date, or date and time.
Insert a date picker on a form template that is based on an existing data source
If you base the design of your form template on an existing Extensible Markup Language (XML) file, database, or Web service, InfoPath derives the fields and groups in the Data Source task pane from that existing data source. In this scenario, you can add a date picker either by dragging a date picker field from the Data Source task pane onto the form template or by inserting the date picker by using the Controls task pane, as described in the following procedure:
-
On the form template, place the cursor where you want to insert the control.
-
If the Controls task pane is not visible, click More Controls on the Insert menu, or press ALT+I, C.
-
Under Insert controls, click Date Picker.
-
In the Date Picker Binding dialog box, select the field in which you want to store the date picker data, and then click OK.
-
InfoPath uses the name of the field or group as the control's label. If necessary, change the label text.
-
To specify the way that the date is displayed on the form, double-click the date picker that was inserted on the form template.
-
On the Data tab, click Format.
-
In the Display the date like this list box, in the Date format dialog box, click the display format that you want.
Note: You can change the display format of the date only if the data type is text, date, or date and time.
Tip: You can also use the Data Source task pane to insert controls. In the Data Source task pane, right-click the field that you want to bind the date picker to, and then click Date Picker on the shortcut menu.
Display the current date in a date picker
To automatically insert the current date on a form when users open it, you can use the today function with a date picker control.
-
Insert a date picker on the form template.
-
Double-click the date picker that you inserted on the form template.
-
Click the Data tab.
-
Under Default Value, click Insert Formula
-
In the Insert Formula dialog box, click Insert Function.
-
In the Categories list in the Insert Function dialog box, click Date and Time.
-
In the Functions list, click today, and then click OK twice to return to the Date Picker Properties dialog box.
Notice that today() appears in the Value box.
-
Under Default Value, clear the Update this value when the result of the formula is recalculated check box.
Note: If you clear this check box, the date isn't updated automatically each time a user opens a form based on this form template. This is ideal in situations where you want users to see the date when the form was created. You can leave the check box selected in situations where you have a Last updated on or Last opened on field, where you want the date to change every time the form is opened.
-
Click OK to return to the form template.
-
To test your changes, click Preview on the Standard toolbar, or press CTRL+SHIFT+B.
-
Verify that the date that appears in the date picker looks the way that you want it to. If it doesn't, you can change how the date or time is displayed by clicking the Format button in the Date Picker Properties dialog box.
Display the current date and time in a date picker
To automatically insert the current date and time on a form when users open it, you can use the now function with a date picker control.
-
Insert a date picker on the form template.
-
Double-click the date picker that you inserted on the form template.
-
Click the Data tab.
-
In the Data type box, click Date and Time (dateTime).
-
Click Format.
-
In the Date and Time Format dialog box, in the Display the time like this list, click the option that you want, and then click OK.
-
In the Date Picker Properties dialog box, under Default Value, click Insert Formula
-
In the Insert Formula dialog box, click Insert Function.
-
In the Categories list in the Insert Function dialog box, click Date and Time.
-
In the Functions list, click now, and then click OK twice to return to the Date Picker Properties dialog box.
Notice that now() appears in the Value box.
-
Under Default Value, clear the Update this value when the result of the formula is recalculated check box.
Note: If you clear this check box, the date isn't updated automatically each time a user opens a form based on this form template. This is ideal in situations where you want users to see the date when the form was created. You can leave the check box selected in situations where you have a Last updated on or Last opened on field, where you want the date to change every time the form is opened.
-
Click OK to return to the form template.
-
To test your changes, click Preview on the Standard toolbar, or press CTRL+SHIFT+B.
-
Verify that the date that appears in the date picker looks the way that you want it to. If it doesn't, you can change how the date or time is displayed by clicking the Format button in the Date Picker Properties dialog box.
Layout tips
Use the following tips to help you refine the appearance, size, and other aspects of a date picker:
-
To change the size of several date pickers at once, select the date pickers whose size you want to change, on the Format menu, click Properties, and then on the Size tab, make the necessary adjustments.
-
To change the border or color of a date picker, select the date picker, on the Format menu, click Borders and Shading, and then make the necessary adjustments.
-
To customize the text that appears in a date picker, use the Font and Font Size boxes on the Formatting toolbar. To change the font and font size for all of the date pickers on your form template at once, right-click the date picker that contains the formatting that you want, and then click Apply Font to All Date Picker Controls on the shortcut menu.
-
To see what your date picker will look like with actual text in it, click Sample Data on the View menu. This helps you get a sense of what the form will look like when users fill it out.
-
On occasion, the text inside a date picker and the label to the left of the date picker may appear to be slightly out of alignment. To quickly realign them, double-click the date picker, click Align on the Size tab, and then click Apply. If the label and date picker are in different cells in a layout table, right-click the cell that contains the label, click Table Properties on the shortcut menu, and then click Center under Vertical alignment on the Cell tab.
-
To change the way that the date is displayed, double-click the date picker, click the Data tab, and then click the Format button. Choose a display format in the Date Format dialog box.
