如何在vue中使用datepicker

本篇文章為大家展示了如何在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的值，發現變化后，對當前日期和選擇的日期進行對比，超過未來時間就不進行變更，而計算后一天或前一天，只需讓當前時間進行加或減一天的時間即可

參考代碼：

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

上述內容就是如何在vue中使用datepicker，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。