Flatpickr

flatpickr is a lightweight and powerful datetime picker. Use the required class varient (e.g. range_flatpicker, date_flatpicker, wrap_flatpicker active ) for different flatpickr. For more details

Installation
npm i vue-flatpickr-component
Script
<flat-pickr :config="configs.dateTimePicker" id="datetime-input" class="form-control" v-model="form.dateTime" placeholder="Date Time" />
                
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
export default {
    name: 'flatpickr',
    components: {
        flatPickr
    },
    data () {
        return {
            inputDisabled: false,
            form: {
                dateTime: null,
                time: null,
                date: '2017-01-01'
            },
            configs: {
                dateTimePicker: {
                    enableTime: true,
                    dateFormat: 'd-m-Y H:i'
                }
            }
        }
    }
}
Previous Next