dayang / vue-multi-date-picker

a date picker pluge for vue , support multiple selection

vue-multi-date-picker

Demo

A date picker for vue2.x support multi selection

Build Setup

# clone
git clone [e-mail]: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

property	type	defaluse	comment
model	Array (multi = true) , Date (multi = false)	-	the model of date picker
multi	Boolean	true	use multi select
disp	Array	['日', '一', '二', '三', '四', '五', '六','年', '月', '取消', '确定']	the order of array must strict

|

Usage

noti: selected dates are UTC formatted

Manually

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

2. Use as component

<template>
  <div>
    <m-date-picker v-model="date" :multi="multi"></m-date-picker>
  </div>
</template>

<script>
  import mDatePicker from 'path/to/multiDatePicker'
  export default {
    data () {
      return {
        multi: true,
        date: []
      }
    }
    components: {
      'm-date-picker': mDatePicker
    }
  }
</script>

npm

1. Install

npm install -S vue-multi-date-picker

2. 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"></m-date-picker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        multi: true,
        date: []
      }
    }
  }
</script>

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