瀏覽代碼

BoV: DateField: Update to use LocalDate, remove references to time

Change-Id: I649b32ea4e1f69538fa1ca7cc765cdd51dfb9f32
feature/eventbus
Johannes Dahlström 8 年之前
父節點
當前提交
f9c98ab840
共有 1 個文件被更改,包括 30 次插入36 次删除
  1. 30
    36
      documentation/components/components-datefield.asciidoc

+ 30
- 36
documentation/components/components-datefield.asciidoc 查看文件

--- ---
title: Date and Time Input with DateField
title: Date Input with DateField
order: 13 order: 13
layout: page layout: page
--- ---


[[components.datefield]] [[components.datefield]]
= Date and Time Input with [classname]#DateField#
= Date Input with [classname]#DateField#


ifdef::web[] ifdef::web[]
[.sampler] [.sampler]
endif::web[] endif::web[]


The [classname]#DateField# component provides the means to display and input The [classname]#DateField# component provides the means to display and input
date and time. The field comes in two variations: [classname]#PopupDateField#,
dates. The field comes in two variations: [classname]#PopupDateField#,
with a numeric input box and a popup calendar view, and with a numeric input box and a popup calendar view, and
[classname]#InlineDateField#, with the calendar view always visible. The [classname]#InlineDateField#, with the calendar view always visible. The
[classname]#DateField# base class defaults to the popup variation. [classname]#DateField# base class defaults to the popup variation.


The example below illustrates the use of the [classname]#DateField# baseclass,
which is equivalent to the [classname]#PopupDateField#. We set the initial time
of the date field to current time by using the default constructor of the
[classname]#java.util.Date# class.
The example below illustrates the use of the [classname]#DateField# base class,
which is equivalent to the [classname]#PopupDateField#. We set the initial date
of the date field to current date by using the factory method [methodname]#now#
of the [classname]#java.time.LocalDate# class.




[source, java] [source, java]
// Create a DateField with the default style // Create a DateField with the default style
DateField date = new DateField(); DateField date = new DateField();


// Set the date and time to present
date.setValue(new Date());
// Set the date to present
date.setValue(LocalDate.now());
---- ----


The result is shown in <<figure.components.datefield.basic>>. The result is shown in <<figure.components.datefield.basic>>.


[[figure.components.datefield.basic]] [[figure.components.datefield.basic]]
.[classname]#DateField# ([classname]#PopupDateField#) for Selecting Date and Time
.[classname]#DateField# ([classname]#PopupDateField#) for Selecting a Date
image::img/datefield-example1.png[width=35%, scaledwidth=60%] image::img/datefield-example1.png[width=35%, scaledwidth=60%]


[[components.datefield.popupdatefield]] [[components.datefield.popupdatefield]]
== [classname]#PopupDateField# == [classname]#PopupDateField#


The [classname]#PopupDateField# provides date input using a text box for the
date and time. 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, as well as time. Also
the Down key opens the popup. Once opened, the user can navigate the calendar
using the cursor keys.
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 and time selected from the popup are displayed in the text box
according to the default date and time format of the current locale, or as
specified with [methodname]#setDateFormat()#. The same format definitions are
used for parsing user input.
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]] [[components.datefield.popupdatefield.format]]
=== Date and Time Format
=== Date Format


The date and time are normally displayed according to the default format for the
current locale (see
The date is normally displayed according to the default format for the current locale (see
<<dummy/../../../framework/components/components-features#components.features.locale,"Locale">>). <<dummy/../../../framework/components/components-features#components.features.locale,"Locale">>).
You can specify a custom format with [methodname]#setDateFormat()#. It takes a You can specify a custom format with [methodname]#setDateFormat()#. It takes a
format string that follows the format of the [classname]#SimpleDateFormat# in
format string that follows the format of the [classname]#java.time.format.DateTimeFormatter# in
Java. Java.




.Custom Date Format for [classname]#PopupDateField# .Custom Date Format for [classname]#PopupDateField#
image::img/datefield-formatting.png[width=35%, scaledwidth=60%] image::img/datefield-formatting.png[width=35%, scaledwidth=60%]


The same format specification is also used for parsing user-input date and time,
The same format specification is also used for parsing user-input date,
as described later. as described later.




[[components.datefield.popupdatefield.malformed]] [[components.datefield.popupdatefield.malformed]]
=== Handling Malformed User Input === Handling Malformed User Input


A user can easily input a malformed or otherwise invalid date or time.
A user can easily input a malformed or otherwise invalid date.
[classname]#DateField# has two validation layers: first on the client-side and [classname]#DateField# has two validation layers: first on the client-side and
then on the server-side. then on the server-side.


// Create a DateField with the default style // Create a DateField with the default style
InlineDateField date = new InlineDateField(); InlineDateField date = new InlineDateField();


// Set the date and time to present
date.setValue(new java.util.Date());
// Set the date to present
date.setValue(LocalDate.now());
---- ----


The result is shown in <<figure.components.datefield.inlinedatefield>>. The result is shown in <<figure.components.datefield.inlinedatefield>>.
== Date and Time Resolution == Date and Time Resolution


In addition to display a calendar with dates, [classname]#DateField# can also 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.
display just the month or year. The visibility of the input components is
controlled by __date resolution__, which you can set with [methodname]#setResolution()#.
The method takes as its parameter the highest resolution date element that should
be visible. Please see the API Reference for the complete list of resolution parameters.




[[components.datefield.locale]] [[components.datefield.locale]]
== DateField Locale == DateField Locale


The date and time are displayed according to the locale of the user, as reported
The date is displayed according to the locale of the user, as reported
by the browser. You can set a custom locale with the [methodname]#setLocale()# by the browser. You can set a custom locale with the [methodname]#setLocale()#
method of [classname]#AbstractComponent#, as described in method of [classname]#AbstractComponent#, as described in
<<dummy/../../../framework/components/components-features#components.features.locale,"Locale">>. <<dummy/../../../framework/components/components-features#components.features.locale,"Locale">>.

Loading…
取消
儲存