A lightweight date picker plugin for Vue.js that supports multiple date selections.

Date _Time




A date picker for vue2.x support multi selection

Build Setup

# clone git clone [email protected]:zhaokuohaha/vue-multi-date-picker.git cd vue-multi-date-picker  # install dependencies npm install  # serve with hot reload at localhost:8080 npm run dev  # build for production with minification npm run build


property type defaults comment
model Array (multi = true) , Date (multi = false) - the model of date picker
multi Boolean true use multi select
disp Array ['日', '一', '二', '三', '四', '五', '六','年', '月', '取消', '确定'] Customize display text. The order of array must strict
lang String 'zh' Set to 'en' to translate to english
format Function function (date) { return date.toLocaleDateString(); } Accepts a function with a date argument and returns a string
always-display Boolean false Always display the date picker


Notice: selected dates are UTC formatted


  1. Copy /src/lib/multiDatePicker.vue to your project

  2. Use as component

<template>   <div>     <m-date-picker v-model="date" :multi="multi" :always-display="false" :format="formatDate"></m-date-picker>   </div> </template>  <script>   import mDatePicker from 'path/to/multiDatePicker'   export default {     data () {       return {         multi: true,         date: []       }     },     components: {       'm-date-picker': mDatePicker     },     methods: {       formatDate(date) {         return data.toLocaleDateString();       }     }   } </script>


  1. Install
npm install -S vue-multi-date-picker
  1. Use plugin
// main.js import mDatePicker from 'vue-multi-date-picker' // ... Vue.use(mDatePicker)
<!-- your component --> <template>   <div>     <m-date-picker v-model="date" :multi="multi" :always-display="false" :format="formatDate"></m-date-picker>   </div> </template>  <script>   export default {     data () {       return {         multi: true,         date: []       }     },     methods: {       formatDate(date) {         return data.toLocaleDateString();       }     }   } </script>

For detailed explanation on how things work, consult the docs for vue-loader.

You May Also Like