Date & Range Picker | VRISTO - Multipurpose Tailwind Dashboard Template

TEMPLATE CUSTOMIZER

Set preferences that will be cookied for your live preview demonstration.

Color Scheme

Overall light or dark presentation.

Navigation Position

Select the primary navigation paradigm for your app.

Semi Dark (Sidebar & Header)

Layout Style

Select the primary layout style for your app.

Direction

Select the direction for your app.

Navbar Type

Sticky or Floating.

StickyFloatingStatic

Router Transition

Animation of main content.

VRISTO

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 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

Postion : Top-right

Postion : Bottom-Left

Postion : Bottom-right

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

Forms
Date and Range Picker