vue中datepicker的使用教程实例代码详解

写这个文章主要是记录下用法，官网已经说的很详细了

npm install vue-datepicker --save

html代码

<myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker>
<myDatepicker :date="endtime" :option="timeoption" :limit="limit"></myDatepicker>

js代码

<script>
import myDatepicker from 'vue-datepicker'
export default {
 name: 'PillDetail',
 components:{
  myDatepicker
 },
 data () {
  return {
   startTime: { // 相当于变量
     time: ''
    },
    endtime: {  // 相当于变量
     time: ''
    },
    timeoption: {
     type: 'min', // day , multi-day
     week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
     month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
     format: 'YYYY-M-D HH:mm', // YYYY-MM-DD 日期
     inputStyle: {    // input 样式
      'display': 'inline-block',
      'padding': '6px',
      'line-height': '22px',
      'width':'160px',
      'font-size': '16px',
      'border': '2px solid #fff',
      'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
      'border-radius': '2px',
      'color': '#5F5F5F',
      'margin':'0'
     },
     color: {  // 字体颜色
      header: '#35acff', // 头部
      headerText: '#fff', // 头部文案
     },
     buttons: {  // button 文案
      ok: '确定',
      cancel: '取消'
     },
     overlayOpacity: 0.5, // 遮罩透明度
     placeholder: '请选时间', // 提示日期
     dismissible: true // 默认true 待定
   },
    multiOption: {
     type: 'min',
     week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
     month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
     format:"YYYY-M-D HH:mm",
     inputStyle: {
      'display': 'inline-block',
      'padding': '6px',
      'line-height': '22px',
      'width':'160px',
      'font-size': '16px',
      'border': '2px solid #fff',
      'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
      'border-radius': '2px',
      'color': '#5F5F5F',
      'margin':'0'
     },
     color: {  // 字体颜色
      header: '#35acff', // 头部
      headerText: '#fff', // 头部文案
     },
     buttons: {  // button 文案
      ok: '确定',
      cancel: '取消'
     },
     placeholder: '请选时间',
     dismissible: true
   },
    limit: [{
     type: 'weekday',
     available: [1, 2, 3, 4, 5,6,0]   },
   {								 
 1/6    1 2 3 4 5 6 下一页 尾页