...
Overview of DatePicker Control
Please note that the title case should be used in case of months and days of week.
...
In addition, application developers must be allowed to modify the behavior in such a way so the calendar automatically pops-up when the field is focused.
DatePicker control
By default, the field does not contain any prompt text, however, application developers can implement it by themselves. If a prompt text is needed, it is recommended to get the required date format through API and display it as a
...
Example of DateField with a prompt
Note that every string that is used in the DatePicker control should be localized in all supported languages.
...
JavaFX DatePicker control is able to display various date formats based on user's locale.
Examples of date formats
Day Restriction
...
Example of a restricted day (12/22/2012)
Weeks of the year
...
Example of the calendar showing weeks of the year
Bidirectional Locales
...
Example of Islamic calendar
East Asia Calendars
...
Example of the calendar showing two months
Time
In some cases, application developers may require users to provide them with time. If so, application developers can enable showing controls that help users to enter the time into the field. These controls appear in the pop-up after a day is entered in the field.
Examples of date formats along with time
In addition to the time, it would be nice if application developers are allowed to enable showing a time zone drop down in the calendar.
Example of the calender showing the time and time zone controls
Please note that if users select 12h time format, AM or PM appends the time that is displayed in the field, e.g.11:28:28AM.
...
Example of the calendar showing an image
6. Navigation
Mouse - the following table describes actions that are performed when users click on:
| Date Field | Display caret in the field. When modified, the calendar may also pop-up. |
| Icon | Display/Hide the calendar. |
| LEFT Arrow | Display previous month/year. |
| RIGHT Arrow | Display next month/year. |
| Day | Update the field with selected date and close the calendar. |
| Outside the calendar | Close the calendar without updating the field. |
Note that when the mouse cursor is above the month or year, users may use the scroll wheel to scroll months or years.
...
Visual Design of DatePicker (Click to enlarge)
Overview
Content Tools
ThemeBuilder