Date Range Picker
JavaScript Date and Time Picker Library.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                daterangepicker: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<input type="text" class="form-control datepicker" placeholder="Select Date">
$('.datepicker').daterangepicker();
Customize variables at:/library/extend/components/_daterangepicker.scss
Component's defaults:/library/components/daterangepicker/_defaults.scss
NameDefault valueNote
$calendar-padding-y16px
$calendar-padding-x16px
$edge-spacing2px
$border-width0
$border-radius4px
$transition.15s
$background-colorpopover-bg
$border-colortransparent
$dividers-colorproperty.get(popover-divider)Requires @use "@library/sass/modules/property";
$selected-dates-value-colorpopover-text-color
$box-shadowproperty.get(popover-shadow)Requires @use "@library/sass/modules/property";
$pagination-arrow-size24
$pagination-arrow-colortheme.get(default, true, popover-text-color)Requires @use "@library/sass/modules/theme";
$alt-pagination-arrow-colortheme.get(alt, true, popover-text-color)Requires @use "@library/sass/modules/theme";
$pagination-hover-arrow-colortheme.get(default, true, primary-contrast)Requires @use "@library/sass/modules/theme";
$table-head-font-weight500
$table-head-colorpopover-text-color
$table-head-month-colorpopover-text-color
$item-size40px
$item-font-weight400
$item-border-radius4px
$item-colorpopover-text-color
$item-week-counter-color#ccc
$item-days-off-color#999
$item-hover-background-colorprimary
$item-hover-colorprimary-contrast
$item-active-background-colorprimary
$item-active-colorprimary-contrast
$item-in-range-background-colorprimary-t-12
$item-in-range-colorprimary-t-12-contrast
$select-padding-y0.125rem
$select-padding-x0.5rem
$select-font-weight400
$select-line-height1.5
$select-background-size10px 6px
$select-indicator-colortheme.get(default, true, form-input-text-color)Requires @use "@library/sass/modules/theme";
$select-indicatorurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1.558.442L5 3.877 8.443.442 9.5 1.5 5 6 .5 1.5 1.558.442z' fill='#{$select-indicator-color}' /></svg>")
$alt-select-indicator-colortheme.get(alt, true, form-input-text-color)Requires @use "@library/sass/modules/theme";
$alt-select-indicatorurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1.558.442L5 3.877 8.443.442 9.5 1.5 5 6 .5 1.5 1.558.442z' fill='#{$alt-select-indicator-color}' /></svg>")
$select-backgroundproperty.get(form-input-bg) svg.escape($select-indicator) no-repeat right $select-padding-x center / $select-background-sizeRequires @use "@library/sass/modules/property";
$alt-select-backgroundproperty.get(form-input-bg) svg.escape($alt-select-indicator) no-repeat right $select-padding-x center / $select-background-sizeRequires @use "@library/sass/modules/property";
$select-colorform-input-text-color
$select-border-colorform-input-border
$select-border-width1px
$select-border-radius0.25rem
$select-box-shadownull
$select-focus-border-colorform-input-focus-border
$select-focus-box-shadownull
$range-menu-item-min-width160px
$range-menu-item-padding-y10px
$range-menu-item-padding-x12px
$range-menu-item-border-radius4px
$range-menu-item-hover-background-colormenu-item-hover-bg
$range-menu-item-hover-colormenu-item-hover-text-color
$range-menu-item-active-background-colormenu-item-active-bg
$range-menu-item-active-colormenu-item-active-text-color
$button-cancel-bgprimary-t-04;
$button-cancel-colormain-text-color;

Make sure to read the Customize components and Understanding and using the design system guides.

{title}