DatePicker
A Panel which can display a month of date cells, which navigates between the cells, fires events upon user selection actions, optionally navigates to other months in response to UI gestures, and optionally displays information about each date cell. Appearance in the built-in themes:
A date is selected (meaning a single value is selected if multiSelect is not set, or added to the selection if if set) by clicking a cell or by pressing Enter when focused on a cell.
The Shift and Ctrl keys modify selection behaviour depending on the value of multiSelect.
This class is used as a picker by the DateField class.
Styling cell content via CSS
Several different CSS classes are applied to date cells depending on their state. These can be used to style contents of cells via CSS.
b-disabled-date- Applied to disabled daysb-weekend- Applied to weekend daysb-past-date- Applied to dates before todayb-today- Applied to today's dateb-non-working-day- Applied to dates which are nonWorkingDays
By default, disabled dates in a lighter color. You can override this in your own CSS, using the CSS variable API of this class.
Custom cell rendering
You can easily control the content of each date cell using the cellRenderer. The example below shows a view typically seen when booking hotel rooms or apartments.
Multi selection
You can select multiple date ranges or a single date range using the multiSelect config.
Configuring toolbar buttons
The datepicker includes a few useful navigation buttons by default. Through the DatePicker´s toolbar, you can manipulate these, via the toolbar´s items config.
There are four buttons by default, each of which can be reconfigured using an object, or disabled by configuring them as null.
new DatePicker({
tbar : {
// Remove all navigation buttons
items : {
prevYear : null,
prevMonth : null,
nextYear : null,
nextMonth : null
}
},
bbar : {
items : {
todayButton : {
text : 'Today',
style : 'margin-inline:auto',
onClick : 'up.onTodayClick'
}
}
},
onTodayClick() {
this.date = new Date();
}
})
Provided toolbar widgets include:
prevMonthNavigates to previous monthnextMonthNavigates to next monthprevYearNavigates to previous yearnextYearNavigates to next year
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
The class name to add to the currently focused calendar cell.
-
The initially selected date (or a
YYYY-MM-DDdate string). -
The DateHelper format string to format the day names.
-
By default, the month and year are editable. Configure this as
falseto prevent that. -
By default, disabled dates cannot be navigated to, and they are skipped over during keyboard navigation. Configure this as
trueto enable navigation to disabled dates. -
Configure as
trueto add a highlighted border and background to the week row which encapsulates the selected date.Has a corresponding runtime highlightSelectedWeek property.
-
By default, the year is visible. Configure this as
falseto prevent that. -
The maximum selectable date. Selection of and navigation to dates after this date will not be possible.
-
The minimum selectable date. Selection of and navigation to dates prior to this date will not be possible.
-
The class name to add to selected calendar cells.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of DatePicker class, or subclass thereof.
-
Configure as
trueto add a highlighted border and background to the week row which encapsulates the selected date.Has a corresponding highlightSelectedWeek config.
-
Identifies an object as an instance of DatePicker class, or subclass thereof.