timepicker-ui
4.5.0GitHub
timepicker-ui

Playground

Every change to the settings updates the preview and the generated code.

Preview
index.js
// HTML: <input id="timepicker" type="text" /> <div id="timepicker-container"></div>
import { TimepickerUI } from 'timepicker-ui';
import 'timepicker-ui/main.css';
const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
ui: {
inline: {
enabled: true,
container: '#timepicker-container',
showButtons: true,
},
},
});
picker.create();
Start from
Look
Look
Theme

ui.theme · default 'basic'

Mode

ui.mode · default 'clock'

Display

ui.inline.enabled · default false

Format
Format
Hour format

clock.type · default '12h'

clock.incrementHours · default 1

clock.incrementMinutes · default 1

clock.showSeconds · default false

Behavior
Behavior

ui.animation · default true

ui.editable · default false

Lets users type the time into the hour and minute fields.

ui.clearButton · default false

Labels
Labels

labels.ok · default 'OK'

labels.cancel · default 'Cancel'

Plugins
Plugins

range.enabled · default false

timezone.enabled · default false

Colors and shape
Colors and shape
Esc