Skip to content
Devix Open Source
Search products /
devix.pk

Guide

Moving from flatpickr or jquery-timepicker

From flatpickr's time mode

// before
flatpickr('#at', {
  enableTime: true,
  noCalendar: true,
  dateFormat: 'H:i',
  minTime: '09:00',
  maxTime: '17:00',
  minuteIncrement: 30,
});

// after
import { createTimePicker } from '@devix-labs/time-picker';
import '@devix-labs/time-picker/styles.css';

createTimePicker(document.querySelector('#at'), { min: '09:00', max: '17:00', step: 30 });
flatpickr Here
enableTime + noCalendar this is a time picker; there is nothing to turn off
dateFormat: 'H:i' the value is always "HH:mm"; the display comes from the locale
time_24hr hourCycle, and by default the locale's own answer
minTime / maxTime min / max
minuteIncrement step, in minutes
enableSeconds seconds
defaultHour / defaultMinute value
altInput + altFormat built in: a visible field in the locale's notation, a hidden one in HH:mm
onChange onChange, or the dx:timechange event
inline inline, pointing at an element
— disabled, which flatpickr has had open as a request since 2018
— zones, which flatpickr has had open since 2017

flatpickr's last release was April 2022 and it has 857 open issues.

From jquery-timepicker

There is an adapter, so a page with a hundred of these can move one field at a time:

<script src="https://devix.pk/cdn/oss/time-picker@1.0.0/jquery.js"></script>
<script>
  $('#at').timepicker({ minTime: '9:00am', maxTime: '5:00pm', step: 30 });
</script>
jquery-timepicker Here
minTime / maxTime mapped to min / max — and they take "9:00am" too
step step (minutes)
disableTimeRanges mapped to disabled
timeFormat: 'H:i' the value is "HH:mm"; display comes from the locale
useSelect: true not needed — the list is a real listbox with a real keyboard
.timepicker('destroy' | 'show' | 'hide') unchanged
changeTime event onChange, or dx:timechange

When you are ready, drop the adapter and call createTimePicker directly; the options are the same ones you already passed.

From react-time-picker or rc-time-picker

// before
<TimePicker value={at} onChange={setAt} format="HH:mm" disableClock />

// after
import { TimePicker } from '@devix-labs/time-picker/react';
<TimePicker value={at} onChange={setAt} name="at" />

value is a "HH:mm" string in both directions, so the Date juggling around rc-time-picker's moment objects goes away with it. rc-time-picker was last published in 2019.

From <input type="time">

createTimePicker(document.querySelector('#at'));

Point it at the input and you keep the field, the name and the value — the native control's value is already "HH:mm" — and gain a list of the times you actually offer, a 12- or 24-hour clock that follows the locale rather than the operating system, typing that understands "5pm", and the same appearance in every browser instead of three different OS widgets.

Updated 15 Sep 2026