Date & Range Picker | VRISTO - Multipurpose Tailwind Dashboard Template

Dashboard
Apps
Components
Elements
Tables
- Tables
- Data Tables
Forms
Pages
More

Forms
Date and Range Picker

Date and Time Picker

Documentation: https://www.npmjs.com/package/vue-flatpickr-component

Basic

Date Time

Use {enableTime: true, dateFormat: 'Y-m-d H:i'} option to enable time support

Range 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/vue-simple-range-slider

Using HTML5 input elements

Non linear slider

500.000%

4000.000%

Locking sliders together

© 2025. Vristo All rights reserved.