anchor.diff:  ---
  -title: Date and Time Input with DateField
  +title: Date Input with DateField
   order: 13
   layout: page
   ---
   
   [[components.datefield]]
  -= Date and Time Input with [classname]#DateField#
  += Date Input with [classname]#DateField#
   
   ifdef::web[]
   [.sampler]
  
positive.code: == Date and Time Resolution
  
  In addition to display a calendar with dates, [classname]#DateField# can also
  display the time in hours and minutes, or just the month or year. The visibility
  of the input components is controlled by __time resolution__, which you can set
  with [methodname]#setResolution()#. The method takes as its parameters the
  lowest visible component, [parameter]#DateField.Resolution.DAY# for just dates
  and [parameter]#DateField.Resolution.MIN# for dates with time in hours and
  minutes. Please see the API Reference for the complete list of resolution
  parameters.
  
  
  [[components.datefield.locale]]
  == DateField Locale
  
  The date and time are displayed according to the locale of the user, as reported
  by the browser. You can set a custom locale with the [methodname]#setLocale()#
  method of [classname]#AbstractComponent#, as described in
  <<dummy/../../../framework/components/components-features#components.features.locale,"Locale">>.
  
negative.code: // Create a DateField with the default style
  DateField date = new DateField();
  
  // Set the date to present
  date.setValue(LocalDate.now());
  ----
  
  The result is shown in <<figure.components.datefield.basic>>.
  
  [[figure.components.datefield.basic]]
  .[classname]#DateField# ([classname]#PopupDateField#) for Selecting a Date
  image::img/datefield-example1.png[width=35%, scaledwidth=60%]
  
  [[components.datefield.popupdatefield]]
  == [classname]#PopupDateField#
  
  The [classname]#PopupDateField# provides date input using a text box. As the
  [classname]#DateField# defaults to this component, the use is exactly the same
  as described earlier. Clicking the handle right of the date opens a popup view
  for selecting the year, month, and day. The Down key also opens the popup.
  Once opened, the user can navigate the calendar using the cursor keys.
  
  The date selected from the popup is displayed in the text box according to the
  default date and format of the current locale, or as specified with [methodname]#setDateFormat()#.
  The same format definitions are used for parsing user input.
  
  [[components.datefield.popupdatefield.format]]
  === Date Format
  
  The date is normally displayed according to the default format for the current locale (see
  <<dummy/../../../framework/components/components-features#components.features.locale,"Locale">>).
  You can specify a custom format with [methodname]#setDateFormat()#. It takes a
  format string that follows the format of the [classname]#java.time.format.DateTimeFormatter# in
  Java.
  
  
  