FormWidgets / DateTimePicker / Examples

DateTimePicker Examples

Live examples of the combined date and time picker widget.

View Documentation

1. Default (with seconds)

Default configuration — YYYY-MM-DD HH:mm:ss format with seconds.

JavaScript
FormWidgets.init('#dtp1', 'DateTimePicker');

2. Without Seconds

Seconds selector hidden — the placeholder shows YYYY-MM-DD HH:mm.

JavaScript
FormWidgets.init('#dtp2', 'DateTimePicker', {
    showSeconds: false,
    timeFormat: 'HH:mm',
    displayFormat: 'YYYY-MM-DD HH:mm'
});

3. UK Date Format

DD/MM/YYYY HH:mm — common for UK applications.

JavaScript
FormWidgets.init('#dtp3', 'DateTimePicker', {
    displayFormat: 'DD/MM/YYYY HH:mm',
    timeFormat: 'HH:mm',
    showSeconds: false
});

4. UK Format with Seconds

Full DD/MM/YYYY HH:mm:ss format with all time components.

JavaScript
FormWidgets.init('#dtp4', 'DateTimePicker', {
    displayFormat: 'DD/MM/YYYY HH:mm:ss',
    showSeconds: true
});

5. Using Data Attributes

Fully configured via HTML data attributes.

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

6. Reading the Selected Value

Select a date and time, then click the button to read the stored value.

Selected value will appear here...
JavaScript
FormWidgets.init('#dtp6', 'DateTimePicker', {
    displayFormat: 'DD/MM/YYYY HH:mm',
    showSeconds: false
});

function readDT() {
    const value = document.getElementById('dtp6').value;
    console.log('Selected datetime:', value);
}