- Forms
- Date and Range Picker
Date and Time Picker
Documentation: https://www.npmjs.com/package/react-flatpickr
Basic
Date Time
Use
{enableTime: true, dateFormat: 'Y-m-d H:i'} option to enable time supportRange Calendar
Use
{mode: 'range'} select the date with range.Preloading Time
Use
{noCalendar: true, enableTime: true, dateFormat: 'H:i'} with Date Time options to disable calendar and show time picker only.Javascript Range Slider
Postion : Top-Left
0%
Postion : Top-right
0%
Postion : Bottom-Left
0%
Postion : Bottom-right
0%
noUI Slider
Documentation: https://www.npmjs.com/package/nouislider-react
Using HTML5 input elements
Non linear slider
500.005%
4000.0040%
Locking sliders together
Value: 40
Value: 40