首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJuly 08, 2019

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

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的值，发现变化后，对当前日期和选择的日期进行对比，超过未来时间就不进行变更，而计算后一天或前一天，只需让当前时间进行加或减一天的时间即可

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

参考代码：

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

总结

以上所述是小编给大家介绍的vue中datepicker的使用教程实例代码详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

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

- Author -

一念执着_c

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
微信小程序实现类似微信点击语音播放效果
Mar 30 #Javascript
微信小程序如何访问公众号文章
Jul 08 #Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 #Javascript
JavaScript实现的联动菜单特效示例
Jul 08 #Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 #Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 #Javascript
Vue实现拖放排序功能的实例代码
Jul 08 #Javascript
MySQL面试题(19) Delphi面试题(13) 自我鉴定(671) J2EE面试题(19) Javascript面试题(44) PYTHON面试题(27) Servlet面试题(20) Ruby面试题(15) SOA面试题(9) UNIX面试题(27)
You might like
截获网站title标签之家内容的例子
2006/10/09 PHP
destoon常用的安全设置概述
2014/06/21 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
js this函数调用无需再次抓获id，name或标签名
2014/03/03 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Python中super关键字用法实例分析
2015/05/28 Python
Python读取Excel的方法实例分析
2015/07/11 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
Jupyter加载文件的实现方法
2020/04/14 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
Speedo美国：澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
德国机车企业：FC-Moto
2017/10/27 全球购物
在线实验室测试：HealthLabs.com
2020/05/03 全球购物
大学毕业生求职自荐信
2014/02/20 职场文书
教师节活动主持词
2014/04/02 职场文书
审计专业自荐信范文
2014/04/21 职场文书
住宅质量保证书
2014/04/29 职场文书
十八大标语口号
2014/10/09 职场文书
酒桌上的开场白
2015/06/01 职场文书
安全主题班会教案
2015/08/12 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
教师读书活动心得体会
2016/01/14 职场文书
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL