FormWidgets / TimePicker / Examples

TimePicker Examples

Live interactive examples of the TimePicker widget. Click any field or press Enter to open the time selector.

View Documentation

1. Basic TimePicker (with seconds)

Default configuration showing hours, minutes, and seconds selectors.

JavaScript
FormWidgets.init('#tp1', 'TimePicker', {
    format: 'HH:mm:ss',
    showSeconds: true
});

2. Without Seconds

Hours and minutes only — the seconds selector is hidden.

JavaScript
FormWidgets.init('#tp2', 'TimePicker', {
    format: 'HH:mm',
    showSeconds: false
});

3. Without Pattern Placeholder

Pattern placeholder disabled — use your own placeholder attribute.

JavaScript
FormWidgets.init('#tp3', 'TimePicker', {
    format: 'HH:mm',
    showSeconds: false,
    showPattern: false
});

4. Using Data Attributes

Configure entirely via HTML — no JavaScript initialization required beyond autoInit().

HTML
<input type="text" class="fw-timepicker"
       data-show-seconds="false"
       data-show-pattern="true">

5. Multiple Time Fields in a Form

Multiple time pickers working independently on the same page.

JavaScript
FormWidgets.init('#tp5a', 'TimePicker', { format: 'HH:mm', showSeconds: false });
FormWidgets.init('#tp5b', 'TimePicker', { format: 'HH:mm', showSeconds: false });
FormWidgets.init('#tp5c', 'TimePicker', { format: 'HH:mm', showSeconds: false });

6. Reading the Selected Value

Select a time then click the button to display its value.

Selected time will appear here...
JavaScript
FormWidgets.init('#tp6', 'TimePicker', {
    format: 'HH:mm:ss'
});

function readTime() {
    const value = document.getElementById('tp6').value;
    console.log('Selected time:', value);
}