DatePicker is a highly configurable widget that adds datepicker functionality to the application. For instance, you can customize the date format, restrict the selectable date ranges, add customized calendar and provide date reference as per your requirement.
The simple way to add DatePicker widget to the application is as follows
The whole list of configuration parameters is available in DatePickerCfg bean.
For Instance,you can also add a customized calendar to select the date.
Enter a date in the first date picker and the successive datepickers will take the previously entered date as the reference one when the user input is
+/-N. If no date is specified then the current date will be taken into account.
The default calendar view of the DatePicker allows to do three things:
- navigating throughout the calendar to find the desired date
- selecting the date to insert into the input field
- actually inserting the date
When the date picker is opened, the calendar is set on the date currently present in the input field, or if none around today's date.
The user can navigate using the mouse:
- through months by clicking the arrows located at the top corners
- directly to special dates thanks to the links available at the bottom of the date picker:
Today: centers the calendar around today's date
Selected date, available only if a date is actually selected: centers the calendar around the selected date
The user can also navigate using the keyboard (note that this will also change the selected date, see next section):
- through days using the arrow keys
- through months using the
Page Downkeys: the day in the month will remain the same if possible (all months don't have the same number of days)
When opening the date picker:
- if no date is present in the input field, no date is selected
- otherwise, the date corresponding to the one present in the input field is automatically selected
Then, in order to only select a date, the user can use the arrow keys.
To insert a date into the input field, the user will have to (left-)click on the desired day.