diff options
author | Ilia Motornyi <elmot@vaadin.com> | 2015-12-03 14:59:05 +0000 |
---|---|---|
committer | Vaadin Code Review <review@vaadin.com> | 2015-12-03 14:59:12 +0000 |
commit | 2af72ba9636bec70046394c41744f89ce4572e35 (patch) | |
tree | ccb3dc2d2239585f8c3f79eb5f131ff61ca9ce86 /documentation/components/components-datefield.asciidoc | |
parent | 8aa5fabe89f2967e966a64842a608eceaf80d08f (diff) | |
download | vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.tar.gz vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.zip |
Revert "Merge branch 'documentation'"7.6.0.beta2
This reverts commit f6874bde3d945c8b2d1b5c17ab50e2d0f1f8ff00.
Change-Id: I67ee1c30ba3e3bcc3c43a1dd2e73a822791514bf
Diffstat (limited to 'documentation/components/components-datefield.asciidoc')
-rw-r--r-- | documentation/components/components-datefield.asciidoc | 386 |
1 files changed, 0 insertions, 386 deletions
diff --git a/documentation/components/components-datefield.asciidoc b/documentation/components/components-datefield.asciidoc deleted file mode 100644 index 6c4b836e26..0000000000 --- a/documentation/components/components-datefield.asciidoc +++ /dev/null @@ -1,386 +0,0 @@ ---- -title: Date and Time Input with DateField -order: 13 -layout: page ---- - -[[components.datefield]] -= Date and Time Input with [classname]#DateField# - -The [classname]#DateField# component provides the means to display and input -date and time. The field comes in two variations: [classname]#PopupDateField#, -with a numeric input box and a popup calendar view, and -[classname]#InlineDateField#, with the calendar view always visible. The -[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. - - -[source, java] ----- -// Create a DateField with the default style -DateField date = new DateField(); - -// Set the date and time to present -date.setValue(new Date()); ----- - -The result is shown in <<figure.components.datefield.basic>>. - -[[figure.components.datefield.basic]] -.[classname]#DateField# ([classname]#PopupDateField#) for Selecting Date and Time -image::img/datefield-example1.png[] - -[[components.datefield.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 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. - -[[components.datefield.popupdatefield.format]] -=== Date and Time Format - -The date and time are 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]#SimpleDateFormat# in -Java. - - -[source, java] ----- -// Display only year, month, and day in ISO format -date.setDateFormat("yyyy-MM-dd"); ----- - -The result is shown in <<figure.components.datefield.popupdatefield.format>>. - -[[figure.components.datefield.popupdatefield.format]] -.Custom Date Format for [classname]#PopupDateField# -image::img/datefield-formatting.png[] - -The same format specification is also used for parsing user-input date and time, -as described later. - - -ifdef::web[] -[[components.datefield.popupdatefield.malformed]] -=== Handling Malformed User Input - -A user can easily input a malformed or otherwise invalid date or time. -[classname]#DateField# has two validation layers: first on the client-side and -then on the server-side. - -The validity of the entered date is first validated on the client-side, -immediately when the input box loses focus. If the date format is invalid, the -[literal]#++v-datefield-parseerror++# style is set. Whether this causes a -visible indication of a problem depends on the theme. The built-in -[literal]#++reindeer++# theme does not shown any indication by default, making -server-side handling of the problem more convenient. - - -[source, css] ----- -.mydate.v-datefield-parseerror .v-textfield { - background: pink; -} ----- - -The [methodname]#setLenient(true)# setting enables relaxed interpretation of -dates, so that invalid dates, such as February 30th or March 0th, are wrapped to -the next or previous month, for example. - -The server-side validation phase occurs when the date value is sent to the -server. If the date field is set in immediate state, it occurs immediately after -the field loses focus. Once this is done and if the status is still invalid, an -error indicator is displayed beside the component. Hovering the mouse pointer -over the indicator shows the error message. - -You can handle the errors by overriding the -[methodname]#handleUnparsableDateString()# method. The method gets the user -input as a string parameter and can provide a custom parsing mechanism, as shown -in the following example. - - -[source, java] ----- -// Create a date field with a custom parsing and a -// custom error message for invalid format -PopupDateField date = new PopupDateField("My Date") { - @Override - protected Date handleUnparsableDateString(String dateString) - throws Property.ConversionException { - // Try custom parsing - String fields[] = dateString.split("/"); - if (fields.length >= 3) { - try { - int year = Integer.parseInt(fields[0]); - int month = Integer.parseInt(fields[1])-1; - int day = Integer.parseInt(fields[2]); - GregorianCalendar c = - new GregorianCalendar(year, month, day); - return c.getTime(); - } catch (NumberFormatException e) { - throw new Property. - ConversionException("Not a number"); - } - } - - // Bad date - throw new Property. - ConversionException("Your date needs two slashes"); - } -}; - -// Display only year, month, and day in slash-delimited format -date.setDateFormat("yyyy/MM/dd"); - -// Don't be too tight about the validity of dates -// on the client-side -date.setLenient(true); ----- - -The handler method must either return a parsed [classname]#Date# object or throw -a [classname]#ConversionException#. Returning [parameter]#null# will set the -field value to [parameter]#null# and clear the input box. - -endif::web[] - -ifdef::web[] -[[components.datefield.popupdatefield.error-customization]] -=== Customizing the Error Message - -In addition to customized parsing, overriding the handler method for unparseable -input is useful for internationalization and other customization of the error -message. You can also use it for another way for reporting the errors, as is -done in the example below: - - -[source, java] ----- -// Create a date field with a custom error message for invalid format -PopupDateField date = new PopupDateField("My Date") { - @Override - protected Date handleUnparsableDateString(String dateString) - throws Property.ConversionException { - // Have a notification for the error - Notification.show( - "Your date needs two slashes", - Notification.TYPE_WARNING_MESSAGE); - - // A failure must always also throw an exception - throw new Property.ConversionException("Bad date"); - } -}; ----- - -If the input is invalid, you should always throw the exception; returning a -[parameter]#null# value would make the input field empty, which is probably -undesired. - -endif::web[] - -[[components.datefield.popupdatefield.prompt]] -=== Input Prompt - -Like other fields that have a text box, [classname]#PopupDateField# allows an -input prompt that is visible until the user has input a value. You can set the -prompt with [methodname]#setInputPrompt#. - - -[source, java] ----- -PopupDateField date = new PopupDateField(); - -// Set the prompt -date.setInputPrompt("Select a date"); - -// Set width explicitly to accommodate the prompt -date.setWidth("10em"); ----- - -The date field doesn't automatically scale to accommodate the prompt, so you -need to set it explicitly with [methodname]#setWidth()#. - -The input prompt is not available in the [classname]#DateField# superclass. - - -[[components.datefield.popupdatefield.css]] -=== CSS Style Rules - - -[source, css] ----- -.v-datefield, v-datefield-popupcalendar {} - .v-textfield, v-datefield-textfield {} - .v-datefield-button {} ----- - -The top-level element of [classname]#DateField# and all its variants have -[literal]#++v-datefield++# style. The base class and the -[classname]#PopupDateField# also have the -[literal]#++v-datefield-popupcalendar++# style. - -In addition, the top-level element has a style that indicates the resolution, -with [literal]#++v-datefield-++# basename and an extension, which is one of -[literal]#++full++#, [literal]#++day++#, [literal]#++month++#, or -[literal]#++year++#. The [literal]#++-full++# style is enabled when the -resolution is smaller than a day. These styles are used mainly for controlling -the appearance of the popup calendar. - -The text box has [literal]#++v-textfield++# and -[literal]#++v-datefield-textfield++# styles, and the calendar button -[literal]#++v-datefield-button++#. - -Once opened, the calendar popup has the following styles at the top level: - - -[source, css] ----- -.v-datefield-popup {} - .v-popupcontent {} - .v-datefield-calendarpanel {} ----- - -The top-level element of the floating popup calendar has -[literal]#++.v-datefield-popup++# style. Observe that the popup frame is outside -the HTML structure of the component, hence it is not enclosed in the -[literal]#++v-datefield++# element and does not include any custom styles. -//NOTE: May be changed in -#5752. -The content in the [literal]#++v-datefield-calendarpanel++# is the same as in -[classname]#InlineDateField#, as described in <<components.datefield.calendar>>. - - - -[[components.datefield.calendar]] -== [classname]#InlineDateField# - -The [classname]#InlineDateField# provides a date picker component with a month -view. The user can navigate months and years by clicking the appropriate arrows. -Unlike with the popup variant, the month view is always visible in the inline -field. - - -[source, java] ----- -// Create a DateField with the default style -InlineDateField date = new InlineDateField(); - -// Set the date and time to present -date.setValue(new java.util.Date()); ----- - -The result is shown in <<figure.components.datefield.inlinedatefield>>. - -[[figure.components.datefield.inlinedatefield]] -.Example of the [classname]#InlineDateField# -image::img/datefield-inlinedatefield.png[] - -The user can also navigate the calendar using the cursor keys. - -=== CSS Style Rules - - -[source, css] ----- -.v-datefield {} - .v-datefield-calendarpanel {} - .v-datefield-calendarpanel-header {} - .v-datefield-calendarpanel-prevyear {} - .v-datefield-calendarpanel-prevmonth {} - .v-datefield-calendarpanel-month {} - .v-datefield-calendarpanel-nextmonth {} - .v-datefield-calendarpanel-nextyear {} - .v-datefield-calendarpanel-body {} - .v-datefield-calendarpanel-weekdays, - .v-datefield-calendarpanel-weeknumbers {} - .v-first {} - .v-last {} - .v-datefield-calendarpanel-weeknumber {} - .v-datefield-calendarpanel-day {} - .v-datefield-calendarpanel-time {} - .v-datefield-time {} - .v-select {} - .v-label {} ----- - -The top-level element has the [literal]#++v-datefield++# style. In addition, the -top-level element has a style name that indicates the resolution of the -calendar, with [literal]#++v-datefield-++# basename and an extension, which is -one of [literal]#++full++#, [literal]#++day++#, [literal]#++month++#, or -[literal]#++year++#. The [literal]#++-full++# style is enabled when the -resolution is smaller than a day. - -The [literal]#++v-datefield-calendarpanel-weeknumbers++# and -[literal]#++v-datefield-calendarpanel-weeknumber++# styles are enabled when the -week numbers are enabled. The former controls the appearance of the weekday -header and the latter the actual week numbers. - -The other style names should be self-explanatory. For weekdays, the -[literal]#++v-first++# and [literal]#++v-last++# styles allow making rounded -endings for the weekday bar. - - - -[[components.datefield.resolution]] -== 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">>. -Only Gregorian calendar is supported. - - -ifdef::web[] -[[components.datefield.weeknumbers]] -== Week Numbers - -You can enable week numbers in a date field with -[methodname]#setShowISOWeekNumbers()#. The numbers are shown in a column on the -left side of the field. - - -[source, java] ----- -df.setShowISOWeekNumbers(true); ----- - -The supported numbering is defined in the ISO 8601 standard. Note that the ISO -standard applies only to calendar locales where the week starts on Monday. This -is not the case in many countries, such as Americas (North and South), many -East-Asian countries, and some African countries, where the week starts on -Sunday, nor in some North African and Middle-Eastern countries, where the week -begins on Saturday. In such locales, the week numbers are not displayed. - -endif::web[] - - - |