Datepicker & Date Range Picker Component For Vue2

Install & Download:

$ npm install vue2-datepicker --save

Description:

Just another date picker and date range picker component for Vue.js 2 applications.

Vue 3 version is now available here.

How to use it:

1. Import and register the Vue 2 date picker component.

import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';

export default {
  components: { DatePicker },
  // ...
};

2. Add the component to the template.

<!-- Date picker -->
<date-picker v-model="time1" valueType="format"></date-picker>
<!-- Datetime picker -->
<date-picker v-model="time2" type="datetime"></date-picker>
<!-- Date range picker -->
<date-picker v-model="time3" range></date-picker>

3. Available props.

value: {},
valueType: {
  type: String,
  default: 'date', // date, format, timestamp, or token like 'YYYY-MM-DD'
},
type: {
  type: String, // ['date', 'datetime', 'time', 'year', 'month', 'week']
  default: 'date',
},
format: {
  type: String,
},
formatter: {
  type: Object,
},
range: {
  type: Boolean,
  default: false,
},
multiple: {
  type: Boolean,
  default: false,
},
rangeSeparator: {
  type: String,
},
lang: {
  type: [String, Object],
},
placeholder: {
  type: String,
  default: '',
},
editable: {
  type: Boolean,
  default: true,
},
disabled: {
  type: Boolean,
  default: false,
},
clearable: {
  type: Boolean,
  default: true,
},
prefixClass: {
  type: String,
  default: 'mx',
},
inputClass: {},
inputAttr: {
  type: Object,
  default: () => ({}),
},
appendToBody: {
  type: Boolean,
  default: true,
},
open: {
  type: Boolean,
  default: undefined,
},
popupClass: {},
popupStyle: {
  type: Object,
  default: () => ({}),
},
inline: {
  type: Boolean,
  default: false,
},
confirm: {
  type: Boolean,
  default: false,
},
confirmText: {
  type: String,
  default: 'OK',
},
renderInputText: {
  type: Function,
},
shortcuts: {
  type: Array,
  validator(value) {
    return (
      Array.isArray(value) &&
      value.every(
        v => isObject(v) && typeof v.text === 'string' && typeof v.onClick === 'function'
      )
    );
  },
  default() {
    return [];
  },
}