Home
Date & Time
Datepicker & Date Range Picker Component For Vue2

Datepicker & Date Range Picker Component For Vue2

mengxiong10 Last Updated: 12 months ago

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 [];
  },
}

Preview:

date-time-year-month-week-picker

Changelog:

v3.11.1 (12/01/2021)

  • bugfix

v3.11.0 (06/11/2021)

  • add disabledCalendarChanger

v3.10.4 (12/02/2021)

  • Bug Fixes

v3.10.3 (11/16/2021)

  • Bug Fixes

v3.10.2 (09/22/2021)

  • Bug Fixes

v3.10.1 (08/30/2021)

  • improve the boundary of disabledtime

v3.9.1 (06/03/2021)

  • Bug Fixes
  • Add default icon for ‘time’ type

v3.9.0 (02/06/2021)

  • shows range on hover

v3.8.2 (12/07/2020)

  • Bug Fixes

v3.8.1 (11/25/2020)

  • Bug Fixes

v3.8.0 (11/18/2020)

  • Fixed the MMM parse error
  • Added event panel-change
  • Added event update:show-time-panel
  • Added prop getYearPanel

v3.7.0 (11/02/2020)

  • add prop formatter to replace the object usage of format

v3.6.3 (10/17/2020)

  • rename t() to translateFn

v3.6.2 (08/11/2020)

  • Bug Fixes

v3.6.1 (07/13/2020)

  • Bugfix: popup sholud be not auto closed in time range

v3.6.0 (06/08/2020)

  • remove touchstart event
  • add multi-select
  • add the prop scroll-duration

Download Details:

Author: mengxiong10

Live Demo: https://mengxiong10.github.io/vue2-datepicker/

Download Link: https://github.com/mengxiong10/vue2-datepicker/archive/master.zip

Official Website: https://github.com/mengxiong10/vue2-datepicker

Install & Download:

$ npm install vue2-datepicker --save

Related Posts

Tags:,

Add Comment