Date / Time picker

A lightweight and powerful date / time picker component.

Finder component

Make sure to link to vue-flatpickr-component css and js files in your document: import 'flatpickr/dist/flatpickr.css'; and import flatPickr from 'vue-flatpickr-component';. Use this page as a reference.

You can alter date / time picker behaviour via flexible data API.

data-datepicker-options = '{}':

To see all available options visit:https://flatpickr.js.org/options/

Usage examples:https://flatpickr.js.org/examples/

Choose date

<!-- Date picker -->
                                        <label class="form-label">Choose date</label>
                                        <div class="input-group">
                                        <flat-pickr v-model="date" class="form-control rounded pe-5" placeholder="Choose date" name="date" />
                                        <i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
                                        </div>

Content