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的使用教程实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
JS前端笔试题分析
Dec 19 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
微信小程序实现类似微信点击语音播放效果
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
You might like
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
python海龟绘图实例教程
2014/07/24 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
失职检讨书大全
2015/01/26 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
毕业欢送会致辞
2015/07/29 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技