Vue2 Datepicker Save

A datepicker / datetimepicker component for Vue2

Project README



A Datepicker Component For Vue2

build:passed Badge npm MIT

For Vue 3.0, you can use vue-datepicker-next from the same author




$ npm install vue2-datepicker --save


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

  export default {
    components: { DatePicker },
    data() {
      return {
        time1: null,
        time2: null,
        time3: null,

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


If your project uses SCSS, you can change the default style variables.

To create a scss file. e.g. datepicker.scss:

$namespace: 'xmx'; // change the 'mx' to 'xmx'. then <date-picker prefix-class="xmx" />

$default-color: #555;
$primary-color: #1284e7;

@import '~vue2-datepicker/scss/index.scss';


The default language of v3.x is English. If you need other locales, you can import a locale file. Once you import a locale, it becomes the active locale.

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

import 'vue2-datepicker/locale/zh-cn';

You can also override some of the default locale by lang. Full config

  export default {
    data() {
      return {
        lang: {
          formatLocale: {
            firstDayOfWeek: 1,
          monthBeforeYear: false,

  <date-picker :lang="lang"></date-picker>


Prop Description Type Default
type select the type of picker date |datetime|year|month|time|week 'date'
range if true, pick the range date boolean false
format to set the date format. similar to moment.js token 'YYYY-MM-DD'
formatter use your own formatter, such as moment.js object -
value-type data type of the binding value value-type 'date'
default-value default date of the calendar Date new Date()
lang override the default locale object
placeholder input placeholder text string ''
editable whether the input is editable boolean true
clearable if false, don't show the clear icon boolean true
confirm if true, need click the button to change value boolean false
confirm-text the text of confirm button string 'OK'
multiple if true, multi-select date boolean false
disabled disable the component boolean false
disabled-date specify the date that cannot be selected (date: Date, currentValue: Date[]) => boolean -
disabled-time specify the time that cannot be selected (date: Date) => boolean -
append-to-body append the popup to body boolean true
inline without input boolean false
input-class input classname string 'mx-input'
input-attr input attrs(eg: { name: 'date', id: 'foo'}) object
open open state of picker boolean -
default-panel default panel of the picker year|month -
popup-style popup style object
popup-class popup classes
shortcuts set shortcuts to select Array<{text, onClick}> -
title-format format of the tooltip in calendar cell token 'YYYY-MM-DD'
partial-update whether update date when select year or month boolean false
range-separator text of range separator string ' ~ '
show-week-number determine whether show week number boolean false
hour-step interval between hours in time picker 1 - 60 1
minute-step interval between minutes in time picker 1 - 60 1
second-step interval between seconds in time picker 1 - 60 1
hour-options custom hour column Array<number> -
minute-options custom minute column Array<number> -
second-options custom second column Array<number> -
show-hour whether show hour column boolean base on format
show-minute whether show minute column boolean base on format
show-second whether show second column boolean base on format
use12h whether show ampm column boolean base on format
show-time-header whether show header of time picker boolean false
time-title-format format of the time header token 'YYYY-MM-DD'
time-picker-options set fixed time list to select time-picker-options null
prefix-class set prefix class string 'mx'
scroll-duration set the duration of scroll when hour is selected number 100


Uint Token output
Year YY 70 71 ... 10 11
YYYY 1970 1971 ... 2010 2011
Y -1000 ...20 ... 1970 ... 9999 +10000
Month M 1 2 ... 11 12
MM 01 02 ... 11 12
MMM Jan Feb ... Nov Dec
MMMM January February ... November December
Day of Month D 1 2 ... 30 31
DD 01 02 ... 30 31
Day of Week d 0 1 ... 5 6
dd Su Mo ... Fr Sa
ddd Sun Mon ... Fri Sat
dddd Sunday Monday ... Friday Saturday
a am pm
Hour H 0 1 ... 22 23
HH 00 01 ... 22 23
h 1 2 ... 12
hh 01 02 ... 12
Minute m 0 1 ... 58 59
mm 00 01 ... 58 59
Second s 0 1 ... 58 59
ss 00 01 ... 58 59
Fractional Second S 0 1 ... 8 9
SS 00 01 ... 98 99
SSS 000 001 ... 998 999
Time Zone Z -07:00 -06:00 ... +06:00 +07:00
ZZ -0700 -0600 ... +0600 +0700
Week of Year w 1 2 ... 52 53
ww 01 02 ... 52 53
Unix Timestamp X 1360013296
Unix Millisecond Timestamp x 1360013296123


The formatter accepts an object to customize formatting.

<date-picker :formatter="momentFormat" />
data() {
  return {
    // Use moment.js instead of the default
    momentFormat: {
      //[optional] Date to String
      stringify: (date) => {
        return date ? moment(date).format('LL') : ''
      //[optional]  String to Date
      parse: (value) => {
        return value ? moment(value, 'LL').toDate() : null
      //[optional] getWeekNumber
      getWeek: (date) => {
        return // a number


set the format of binding value

Value Description
'date' return a Date object
'timestamp' return a timestamp number
'format' returns a string formatted using pattern of format
token(MM/DD/YYYY) returns a string formatted using this pattern


The shortcuts for the range picker

  { text: 'today', onClick: () => new Date() },
    text: 'Yesterday',
    onClick: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
Attribute Description
text title of the shortcut
onClick callback function , need to return a Date


Set fixed time list to select;

{start: '00:00', step:'00:30' , end: '23:30', format: 'HH:mm' }
Attribute Description
start start time
step step time
end end time
format the default is same as prop format


Name Description Callback Arguments
input When the value change(v-model event) date
change When the value change(same as input) date, type('date'|'hour'|'minute'|'second'|'ampm
open When panel opening event
close When panel closing
confirm When click 'confirm' button date
clear When click 'clear' button
input-error When user type a invalid Date the input text
focus When input focus
blur When input blur
pick when select date #429 date
calendar-change when change the calendar date, oldDate, type('year'|'month'|'last-year'|'next-year'|'last-month'|'next-month'|'last-decade'|'next-decade')
panel-change when the calendar panel changes type('year'|'month'|'date'), oldType


Name Description
icon-calendar custom the calender icon
icon-clear custom the clear icon
input replace input
header popup header
footer popup footer
sidebar popup sidebar



One-time Donations

If you find this project useful, you can buy me a coffee

Paypal Me




Copyright (c) 2017-present xiemengxiong

Open Source Agenda is not affiliated with "Vue2 Datepicker" Project. README Source: mengxiong10/vue2-datepicker
Open Issues
Last Commit
6 months ago

Open Source Agenda Badge

Open Source Agenda Rating