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

HTML Code

<flat-pickr :config="configs.dateTimePicker" id="datetime-input" class="form-control" v-model="form.dateTime" placeholder="Date Time" />
Script
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