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]   },   {     type: 'fromto',     from: '2016-02-01',     to: '2050-02-20'   }]  } }, methods: {   }}</script>

设置前一天和后一天的时间，我的实现是通过watch来监听startTime的值，发现变化后，对当前日期和选择的日期进行对比，超过未来时间就不进行变更，而计算后一天或前一天，只需让当前时间进行加或减一天的时间即可