如何在vue中使用datepicker

本篇文章为大家展示了如何在vue中使用datepicker，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的溧水网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

npm install vue-datepicker --save

html代码

js代码

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

参考代码：

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


 .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;
 }

上述内容就是如何在vue中使用datepicker，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。