4.6. Date and Time Input

The DateField component provides the means to display andinput date and time. The field comes in two variations: PopupDateField with numeric input fields and a popup calendar view and InlineDateField with the calendar view always visible and the numeric input fields only for time. The DateField base class defaults to the popup variation.

The example below illustrates the use of the DateField with the default style. We set the time of the DateField to current time with the default constructor of the java.util.Date class.

/* Create a DateField with the default style. */
DateField date = new DateField();
	
/* Set the date and time to present. */
date.setValue(new java.util.Date());

Figure 4.8. Example of the Date Field with Default Style

Example of the Date Field with Default Style

The default style provides date input using a text box for the date and combo boxes for the time, down to milliseconds. Pressing the "..." button right of the date opens a month view for selecting the date.

You probably will not need milliseconds in most applications, and might not even need the time, but just the date. The visibility of the input components is controlled by resolution of the field which can be set with setResolution() method. The method takes as its parameters the lowest visible component, typically RESOLUTION_DAY for just dates and RESOLUTION_MIN for dates with time in hours and minutes. Please see the API Reference for a complete list of resolution parameters.

4.6.1. Calendar

The calendar style of the DateField provides a date picker component with a month view, just like the one in the default style that opens by clicking the "..." button. The user can navigate months and years by clicking the appropriate arrows.

/* Create a DateField with the calendar style. */
DateField date = new DateField("Here is a calendar field");
date.setStyle("calendar");
	
/* Set the date and time to present. */
date.setValue(new java.util.Date());

main.addComponent(date);

Figure 4.9. Example of the Date Field with Calendar Style

Example of the Date Field with Calendar Style

4.6.2. DateField Locale

The date fields use the locale set for the component, which defaults to the system locale. You can set a custom locale with the setLocale() method of AbstractComponent.