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

npm install vue-datepicker --save

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

<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>

<template> <div class="menu-container">  <Header :title="title" :xian="xian" :name="name" :food="food"></Header>  <div class="box">    <div class="timeselectbox">      <li class="daybefore" @click="getYesterday(startTime.time)">        < 前一天      </li>      <li class="dateselect">        <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker>        <!-- 2018-04-05 -->      </li>      <li class="nextday" @click="getTomorrow(startTime.time)">        后一天 >      </li>    </div>    <div class="databox">      <div class="allsale" style="border-right:1px solid white">        <p class="p-top">总金额(元)</p>        <p class="p-bott">{{statistics.amount}}</p>      </div>      <div class="eff">        <p class="p-top">总数量(张)</p>        <p class="p-bott">{{statistics.sum}}</p>      </div>    </div>    <div class="paydetail">      <li @click="countvouchertype({       use_date:startTime.time,       ticket_type:1,       active:'koubei'      })" :class="{active:active.koubei}"><span>口碑券：</span>{{statistics.koubei}}笔</li>      <li @click="countvouchertype({       use_date:startTime.time,       ticket_type:2,       active:'meituan'      })" :class="{active:active.meituan}"><span>美团券：</span>{{statistics.meituan}}笔</li>      <li @click="countvouchertype({       use_date:startTime.time,       ticket_type:3,       active:'nuomi'      })" :class="{active:active.nuomi}"><span>糯米券：</span>{{statistics.nuomi}}笔</li>    </div>    <div class="allsale_price">      总金额：￥{{checkCouponList.amount}}    </div>    <div class="table">      <table class="table_data">        <tr class="describe">          <th></th>          <th>券码</th>          <th>类型</th>          <th>状态</th>          <th>金额</th>        </tr>        <tr @click="topath({         name:'/checkCouponInfo',         item:item        })" v-for="(item,index) in checkCouponList.data">          <td></td>          <td>{{item.ticket_code}}</td>          <td>{{item.ticket_type}}</td>          <td class="status" :class="item.active == 't' ? 'status-active' : ''">{{item.active == 't' ? '成功' : '失败'}}</td>          <td>￥{{item.amount}}<b class="right_j"></b></td>        </tr>      </table>    </div>  </div> </div></template><script type="text/javascript"> import Header from '../Mast/Header' import myDatepicker from 'vue-datepicker' export default{  name:'CertificateDetail',  data () {  return {    title:'验券明细',    xian:false,    name:'launcher',    food:true,    active:{      koubei:true,      meituan:false,      nuomi:false,    },    checkCouponList:{     data:[]    },    statistics:{},    startTime: {     time: ''    },    multiOption: {     type: 'day',     week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],     month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],     format:"YYYY-MM-DD",     inputStyle: {      'display': 'inline-block',      'height':'35px',      'line-height': '35px',      'width':'141px',      'font-size': '16px',      'border': 'none',      'color': '#5F5F5F',      'margin':'0',      'text-align':'center'     },     color: {    // 字体颜色      header: '#ff5534', // 头部      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:{   topath: function (params) {     this.$store.state.cashtime1 = this.startTime.time;    if(params['name'] == '/checkCouponInfo'){     this.$store.commit('couponInfo',params['item']);    }    this.$router.push({'path':params['name']});   },   getYesterday: function (time) {    let yesterday = new Date(time);    yesterday.setTime(yesterday.getTime() - 24 * 60 * 60 * 1000);    let reduce = '-';    this.startTime.time = yesterday.getFullYear() + reduce + this.addZero(yesterday.getMonth() + 1) + reduce + this.addZero(yesterday.getDate());   },   getTomorrow: function (time) {    let tomorrow = new Date(time);    let nowDate = this.getNowFormatDate();    tomorrow.setTime(tomorrow.getTime() + 24 * 60 * 60 * 1000);    let reduce = '-';    let year = tomorrow.getFullYear() + reduce + this.addZero(tomorrow.getMonth() + 1) + reduce + this.addZero(tomorrow.getDate());    let t_timestamp = Math.round(new Date(year) / 1000);    let n_timestamp = Math.round(new Date(nowDate) / 1000);    if(t_timestamp > n_timestamp){     return mui.toast('不能超过今天');    }else{     this.startTime.time = year;    }   },   getNowFormatDate: function () {    let date = new Date();    let reduce = "-";    let currentdate = date.getFullYear() + reduce + this.addZero(date.getMonth() + 1) + reduce + this.addZero(date.getDate());    return currentdate;   },   addZero: function (time) {    if (time >= 1 && time <= 9) {      time = "0" + time;    }    return time;   },   countvouchertype: function (params) {    // 设置选项卡    for(let key in this.active){     if(params['active'] == key){      this.active[key] = true;     }else{      this.active[key] = false;     }    }    this.$store.state.mastloadding = true;    console.dir(params);    this.API.countvouchertype(params).then((response) => {           this.checkCouponList = response;      console.dir(this.checkCouponList);      this.$store.state.mastloadding = false;    }, (response) => {      this.$store.state.mastloadding = false;      mui.toast('网络错误');    });   },   countvoucherinfo: function (params) {    this.API.countvoucherinfo(params).then((response) => {      console.dir(response);      this.statistics = response;    }, (response) => {      mui.toast('网络错误');    });   }  },  components:{   Header,   myDatepicker  },  mounted(){    this.startTime.time = this.$store.state.cashtime1 ? this.$store.state.cashtime1 : this.getNowFormatDate();   // this.startTime.time = this.getNowFormatDate();  },  watch: {   startTime: { 　　　　handler(newValue, oldValue) { 　　　　　　console.log(newValue);       let newTimestamp = Math.round(new Date(newValue .time) / 1000);       let oldTimestamp = Math.round(new Date(this.getNowFormatDate()) / 1000);       if(newTimestamp > oldTimestamp){        this.startTime.time = this.getNowFormatDate();        mui.toast('不能超过今天');       }else{        let active = '';        let ticket_type = 1;        for(let key in this.active){         if(this.active[key]){          active = key          if(key=='meituan'){           ticket_type = 2          }          if(key == 'nuomi')          {           ticket_type = 3          }         }        }        this.countvoucherinfo({         use_date:this.startTime.time        });        this.countvouchertype({         use_date:this.startTime.time,         ticket_type:ticket_type,         active:active        });       }        　　　　},     deep:true 　　}  } }</script><style type="text/css" scoped> .menu-container{  background:#fff; } .box{  width:100%;  margin-top:45px;  background:#fff; } .timeselectbox{  height:60px;  background:#edeeef; } .timeselectbox li{  list-style: none;  float:left;  height:35px;  line-height:35px;  margin-top:10px;  color:black; } .daybefore{  width:28%;  padding-left:10px;  font-size:13.5px; } .dateselect{  border-radius: 3px;  background:#fff;  width:44%;  text-align:center; } .nextday{  text-align: right;  width:28%;  padding-right:10px;  font-size:13.5px; } .databox{  height:115px;  background:#ff5534; } .databox div{  float:left;  height:80px;  margin-top:17.5px;  text-align:center; } .allsale{  width:50%; } .databox p{  color:white; } .p-top{  color:#eaebec;  margin-top:15px; } .p-bott{  font-size:18px;  margin-top:5px;  font-weight: bold; } .eff{  width:49.7%;  border-left:1px solid #cccccc96; } .paydetail{  height:52px;  background:white;  width:100%; } .paydetail li{  display: inline-block;  float:left;  width:33.3%;  font-size:12px;  text-align:center;  height:100%;  line-height: 50px;  overflow: hidden; } .line{  display: block;   margin-left: 32px;   width: 25%;   border: 1px solid #40AAEB; } .active{  color:#ff5534;  border-bottom:1px solid #ff5534; } .allsale_price{  height:40px;  background:#f4f4f4;  text-align: center;  line-height: 40px;  font-size: 12px; } .table{  width:100%; } .table_data{  width:100%; } .table_data th{  height:30px;  font-size:15px; } .describe{  border-bottom:1px solid #f4f4f4; } .describe th:nth-child(1){  width:5%;  /*text-align: left;*/ } .describe th:nth-child(2){  text-align: left; } .table_data tr{  width:100%; } .table_data tr td{  text-align:center;  height:30px;  line-height: 30px;  font-size:13px;  position:relative; } .table_data tr td:nth-child(1){  width:3%; } .table_data tr td:nth-child(2){  text-align: left; } .status{  color:red; } .status-active{  color:green; } .right_j{  /*background:url('/static/img/scancode_right.png') no-repeat;*/  background-size:9px !important;  display: inline-block;  position:absolute;  width:15px;  height:15px;  line-height: 30px;  font-size:18px;  right:5px;  top:5px; }</style>