A datepicker / datetimepicker component for Vue2

A datepicker / datetimepicker component for Vue2

A Datepicker Component For Vue2



A Datepicker Component For Vue2

build:passed Badge npm MIT





$ npm install vue2-datepicker --save


import DatePicker from 'vue2-datepicker'

export default {
  components: { DatePicker },
  data() {
    return {
      time1: '',
      time2: '',
      time3: '',
      // custom lang
      lang: {
        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
        placeholder: {
          date: 'Select Date',
          dateRange: 'Select Date Range'
      // custom range shortcuts
      shortcuts: [
          text: 'Today',
          onClick: () => {
            this.time3 = [ new Date(), new Date() ]
        start: '00:00',
        step: '00:30',
        end: '23:30'

    <date-picker v-model="time1" :first-day-of-week="1"></date-picker>
    <date-picker v-model="time2" type="datetime" :time-picker-options="timePickerOptions"></date-picker>
    <date-picker v-model="time3" range :shortcuts="shortcuts"></date-picker>
    <date-picker v-model="value" :lang="lang"></date-picker>


Prop Description Type Default
type select date type 'date' | 'datetime' | 'year' | 'month' | 'time' 'date'
range if true, the type is daterange or datetimerange boolean false
format format the Date. The parsing tokens are similar to the moment.js token | object 'YYYY-MM-DD'
value-type type of binding value. If not specified, the binding value will be a Date object value-type 'date'
lang Translation lang 'zh'
clearable if false, don't show the clear icon boolean true
confirm if true, need click the button to change the value boolean false
editable if false, user cann't type it boolean true
disabled Disable the component boolean false
placeholder input placeholder text string
width input size string|number 210
append-to-body append the popup to body boolean false
default-value default date of the calendar Date new Date()
popupStyle popup style(override the top, left style) object
not-before Disable all dates before new Date(not-before) string|Date ''
not-after Disable all dates after new Date(not-after) string|Date ''
disabled-days Disable Days (date) => boolean -
shortcuts the shortcuts for the range picker shortcuts true
time-picker-options custom time-picker time-picker-options null
minute-step if > 0 don't show the second picker 0 - 60 0
first-day-of-week set the first day of week 1 - 7 7
input-class the input class name string 'mx-input'
input-attr the input attr(eg: { required: true, id: 'input'}) object
confirm-text the default text to display on confirm button string 'OK'
range-separator the range separator text string '~'
date-format format the time header and tooltip string ''


set the format of binding value

Value Description
date binding value will be a Date object
timestamp binding value will be a timestamp number
format binding value will be the format string

Advanced: You can also customize objects to implement two functions.

  value2date: (value: any) => Date,  // transform the binding value to calendar Date Object
  date2value: (date: Date) => any   // transform the calendar Date Object to binding value


{ days: string[]; months: string[]; picker: string[]; placeholder: { date: string; dateRange: string } }


the shortcuts for the range picker

Value Description
true show the default shortcuts
false hide the defaualt shortcuts
[{text: string, onClick: () => any }] custom shortcuts


custom time-picker

{start: '00:00', step:'00:30' , end: '23:30'}
() => Array<{ label: string; values: { hours: number; minutes: number } }>


Name Description Callback Arguments
input When the value change(v-model event) the currentValue
change When the value change(same as input) the currentValue
confirm When click 'confirm' button the currentValue
clear When click 'clear' button
input-error When user type a invalid Date the input text
panel-change When change the panel view(eg: from year to month view) panel, oldPanel
calendar-change When calendar view year or month change now(Date), oldNow(Date)
focus When input focus
blur When input blur


Value Description
NONE when panel is closed
DATE when panel is date
YEAR when panel is year
MONTH when panel is month
TIME when panel is time


Name Description
calendar-icon custom the calender icon
header popup header
footer popup footer





Copyright (c) 2017-present xiemengxiong

Github Repository