flatpickr
A lightweight and powerful datetimepicker.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                flatpickr: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<input id="flatpickr" class="form-control" />
flatpickr("#flatpickr", {});
Customize variables at:/library/extend/components/_flatpickr.scss
Component's defaults:/library/components/flatpickr/_defaults.scss
NameDefault valueNote
$calendar-width($calendar-day-width * 7 + $calendar-day-margin * 14 + ($calendar-padding-x * 2))
$calendar-padding-x16px
$calendar-padding-y16px
$calendar-bgpopover-bg;
$calendar-text-colorpopover-text-color;
$calendar-box-shadowproperty.get(popover-shadow)Requires @use "@library/sass/modules/property";
$calendar-open-beziercubic-bezier(0.23, 1, 0.32, 1)
$navbar-picker-height40px;
$navbar-colorpopover-text-color;
$navbar-border-colorui-base-color-5;
$navbar-input-heightcalc(1.5em + 0.564rem + 2px)
$navbar-input-padding-y0.282rem
$navbar-input-padding-x.75rem
$navbar-input-font-size$font-size-sm
$navbar-input-border-radius$border-radius-sm
$navbar-input-bgform-input-bg
$navbar-input-colorform-input-text-color
$navbar-input-border-colorform-input-border
$navbar-input-border-box-shadownull
$navbar-input-hover-bgform-input-hover-bg
$navbar-input-hover-colorform-input-hover-text-color
$navbar-input-hover-border-colorform-input-hover-border
$navbar-input-hover-border-box-shadowform-input-hover-box-shadow
$navbar-input-focus-bgform-input-focus-bg
$navbar-input-focus-colorform-input-focus-text-color
$navbar-input-focus-border-colorform-input-focus-border
$navbar-input-focus-border-box-shadow0 0 0 .25rem property.get(form-input-focus-box-shadow)Requires @use "@library/sass/modules/property";
$navbar-arrow-width$navbar-picker-height;
$navbar-arrow-height$navbar-picker-height;
$navbar-arrow-radius4px;
$navbar-arrow-bgtransparent;
$navbar-arrow-colortheme.get(default, true, popover-text-color);Requires @use "@library/sass/modules/theme";
$navbar-arrow-color-alttheme.get(alt, true, popover-text-color);Requires @use "@library/sass/modules/theme";
$navbar-arrow-hover-bgprimary;
$navbar-arrow-hover-colortheme.get(default, true, primary-contrast);Requires @use "@library/sass/modules/theme";
$navbar-arrow-hover-color-alttheme.get(alt, true, primary-contrast);Requires @use "@library/sass/modules/theme";
$calendar-weekbar-item-height40px;
$calendar-weekbar-colorpopover-text-color;
$calendar-day-width40px;
$calendar-day-height40px;
$calendar-day-border-radius4px;
$calendar-day-font-weight400;
$calendar-day-alt-bgnone;
$calendar-day-alt-border-colortransparent;
$calendar-day-alt-text-colorui-base-color-6;
$calendar-today-bgtransparent;
$calendar-today-border-colorprimary;
$calendar-today-text-colorprimary;
$calendar-day-inrange-bgprimary-t-12;
$calendar-day-inrange-border-colortransparent;
$calendar-day-inrange-text-colorprimary-t-12-contrast;
$calendar-day-bgnone;
$calendar-day-border-colortransparent;
$calendar-day-text-colorpopover-text-color;
$calendar-day-hover-bgprimary;
$calendar-day-hover-border-colortransparent;
$calendar-day-hover-text-colorprimary-contrast;
$calendar-day-active-bgprimary;
$calendar-day-active-border-colortransparent;
$calendar-day-active-text-colorprimary-contrast;
$calendar-day-padding($calendar-day-width/16)
$calendar-day-margin1px

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

{title}