Vue 2.x Datetime Picker Plugin

Install & Download:

# NPM
$ npm install vue-vanilla-datetime-picker --save

Description:

A basic date and time picker plugin for Vue.js 2.x. Also supports inline calendar mode.

How to use it:

1. Import and register the datetime picker.

import DateTimePicker from 'vue-vanilla-datetime-picker';
// stylesheet
@import "node_modules/vue-vanilla-datetime-picker/dist/DateTimePicker"
Vue.component('date-time-picker', DateTimePicker);

2. Basic usage.

<date-time-picker
  v-model="date"
  format="DDDD"
></date-time-picker>

3. Available props.

value: {
  required: true,
},
minDate: {
  default: () => null,
},
maxDate: {
  default: () => null,
},
initialViewDate: {
  default: () => null,
},
disabledDates: {
  type: [Array],
  default: () => [],
},
highlighted: {
  type: [Array],
  default: () => [],
},
constraintsFormat: {
  type: [String],
  default: 'yyyy-LL-dd',
},
initialView: {
  type: [String],
  default: 'days',
},
mainButtonClass: {
  type: [String],
  default: '',
},
format: {
  type: [String],
  default: 'yyyy-LL-dd HH:mm',
},
disabled: {
  type: [Boolean],
  default: false,
},
valueFormat: {
  type: [String],
  default: 'yyyy-LL-dd HH:mm:ss',
},
valueType: {
  type: [String],
  default: 'Auto',
},
emptyValue: {
  default: '',
},
minuteStep: {
  type: [Number],
  default: 1,
},
inline: {
  type: [Boolean],
  default: false,
},
timePicker: {
  type: [Boolean],
  default: true,
},
hourTime: {
  type: [Number],
  default: 24,
},
startFromSunday: {
  type: [Boolean],
  default: false,
},
secondsPicker: {
  type: [Boolean],
  default: false,
},
locale: {
  type: [String],
  default: 'en',
},
autoClose: {
  type: [Boolean],
  default: false,
},
clearButton: {
  type: [Boolean],
  default: false,
},
todayButton: {
  type: [Boolean],
  default: false,
},
closeButton: {
  type: [Boolean],
  default: false,
},
noToggleTimePicker: {
  type: [Boolean],
  default: false,
},
onlyTimePicker: {
  type: [Boolean],
  default: false,
},

Preview:

Vue 2.x Datetime Picker Plugin

Changelog:

v1.2.0 (02/06/2022)

  • Update

Add Comment