Daterangepicker Formitem component
This component allows the user to pick a date range. The component guarantees that only valid date ranges can be picked (correctly formatted, has valid maximum and minimum dates and the minimum date is less or equal to the maximum date).
The component displays an input field for the user, that when clicked, will open two drop down calendars. The left side calendar will allow the user to pick a starting date, the right side calendar will allow the user to pick the ending date. The user can also type in a date, but if it is not in the correct format, the component will revert back to its default value.
The component also allows the use of predefined date ranges, which the user can chose by its name (Previous month, week etc). This makes it easier for the user to input frequently used date ranges. These predefined ranges can be added by using the DateRangePicker.addPredefinedRange(java.lang.String, java.lang.String, java.util.Date, java.util.Date) method.
Supported events:
Show, Hide, Change, Focus, Animations, Edit, Click, KeyboardEvents, MouseEvents, Touch, HotKey, Drag&Drop
Style customization
Name |
Default value |
Derived value |
Computed value |
Comment |
|---|---|---|---|---|
| $date-picker-active-day-bg-color | $primary | $date-picker-active-day-bg-color-->$primary-->#079e97 | #079e97 | Background color for a selected day. |
| $date-picker-active-day-border | 1px solid transparent | 1px solid transparent | Frame settings for a selected day. | |
| $date-picker-active-day-color | $white | $date-picker-active-day-color-->$white-->#fff | #fff | Label color for a selected day. |
| $date-picker-active-range-bg-color | $highlight-color | $date-picker-active-range-bg-color-->$highlight-color-->#eefaff | #eefaff | Interval background color for a selected day. |
| $date-picker-active-range-color | $gray-500 | $date-picker-active-range-color-->$gray-500-->#adb5bd | #adb5bd | Interval color for a selected day. |
| $date-picker-bg-color | $white | $date-picker-bg-color-->$white-->#fff | #fff | Component background color. |
| $date-picker-border-color | $border-color | $date-picker-border-color-->$border-color-->#e9ecef | #e9ecef | Frame color for the outermost component. |
| $date-picker-buttons-bg-color | $date-picker-bg-color | $date-picker-buttons-bg-color-->$date-picker-bg-color-->#fff | #fff | Background color for the container encasing the buttons. |
| $date-picker-buttons-border-top-color | $border-color | $date-picker-buttons-border-top-color-->$border-color-->#e9ecef | #e9ecef | Color of the separating element between DatePicker and buttons. |
| $date-picker-buttons-border-top-width | 1px | 1px | Width of the separating element between DatePicker and buttons. | |
| $date-picker-caret-border-color | $gray-400 | $date-picker-caret-border-color-->$gray-400-->#ced4da | #ced4da | Component’s small arrow (pointing to the input field) frame color. |
| $date-picker-caret-color | $white | $date-picker-caret-color-->$white-->#fff | #fff | Component’s small arrow (pointing to the input field) color. |
| $date-picker-day-off-bg-color | $white | $date-picker-day-off-bg-color-->$white-->#fff | #fff | Background color for days outside or within a range. |
| $date-picker-day-off-color | $gray-500 | $date-picker-day-off-color-->$gray-500-->#adb5bd | #adb5bd | Label color for days outside or within a range. |
| $date-picker-disabled-color | $gray-500 | $date-picker-disabled-color-->$gray-500-->#adb5bd | #adb5bd | Color for disabled components. |
| $date-picker-font-family | arial | arial | Font used. | |
| $date-picker-hover-bg-color | $gray-200 | $date-picker-hover-bg-color-->$gray-200-->#e9ecef | #e9ecef | Hover background color for a day. |
| $date-picker-next-color | $input-color | $date-picker-next-color-->$input-color-->#495057 | #495057 | Increment arrow color. |
| $date-picker-selected-text-color | inherit | inherit | VARIABLE NOT USED | |
| $date-picker-selected-text-font-size | $font-size-base | $date-picker-selected-text-font-size-->$font-size-base-->1rem | 1rem | Label size for a selected date. |
| $date-picker-selected-text-padding-right | $spacer * 0.6 | $date-picker-selected-text-padding-right-->$spacer * 0.6-->1rem * 0.6 | 0.6rem | Spacing to the right of a selected label from the buttons. |
| $date-picker-table-bg-color | $date-picker-bg-color | $date-picker-table-bg-color-->$date-picker-bg-color-->#fff | #fff | Background color for a month. |
| $date-picker-table-border-color | $white | $date-picker-table-border-color-->$white-->#fff | #fff | Frame color surrounding a month. |
| $date-picker-time-bg-color | $gray-200 | $date-picker-time-bg-color-->$gray-200-->#e9ecef | #e9ecef | Time display background color. |
| $date-picker-time-border-color | $gray-200 | $date-picker-time-border-color-->$gray-200-->#e9ecef | #e9ecef | Time display frame color. |
| $date-picker-time-color | inherit | inherit | Time display text color. | |
| $date-picker-today-bg-color | $light | $date-picker-today-bg-color-->$light-->mix(#f8f9fa, #e9ecef, 50%) | mix(#f8f9fa, #e9ecef, 50%) | Today’s color. |
| $date-picker-today-border | $date-picker-active-day-border | $date-picker-today-border-->$date-picker-active-day-border-->1px solid transparent | 1px solid transparent | Today’s frame color. |
| $date-picker-today-color | $primary | $date-picker-today-color-->$primary-->#079e97 | #079e97 | Today’s text color. |