jquery-timepicker
A lightweight, customizable jQuery timepicker plugin inspired by Google Calendar.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                timepicker: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<input class="form-control timepicker" placeholder="Pick Time">
$('.timepicker').timepicker(options);
Customize variables at:/library/extend/components/_timepicker.scss
Component's defaults:/library/components/timepicker/_defaults.scss
NameDefault valueNote
$timepicker-dropdown-padding-y8px
$timepicker-dropdown-padding-x8px
$timepicker-dropdown-edge-spacing.2rem
$timepicker-dropdown-border-width0
$timepicker-dropdown-border-colorpopover-divider
$timepicker-dropdown-border-radius4px
$timepicker-dropdown-min-widthnull
$timepicker-dropdown-max-height200px
$timepicker-dropdown-z-index10052
$timepicker-dropdown-backgroundpopover-bg
$timepicker-dropdown-box-shadowproperty.get(popover-shadow)Requires @use "@library/sass/modules/property";
$timepicker-dropdown-menu-item-padding-y10px
$timepicker-dropdown-menu-item-padding-x8px
$timepicker-dropdown-menu-item-line-height1
$timepicker-dropdown-menu-item-border-radius4px
$timepicker-dropdown-menu-item-transition0.15s
$timepicker-dropdown-menu-item-colormenu-item-text-color
$timepicker-dropdown-menu-item-font-sizenull
$timepicker-dropdown-menu-item-duration-font-size12px
$timepicker-dropdown-menu-item-duration-font-weight500
$timepicker-dropdown-menu-item-duration-colormenu-item-disabled-color
$timepicker-dropdown-menu-item-disabled-background-colornull
$timepicker-dropdown-menu-item-disabled-colormenu-item-disabled-color
$timepicker-dropdown-menu-item-duration-disabled-colormenu-item-disabled-color

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

{title}