首页
所有分类
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 相关文章推荐
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
layui原生表单验证的实例
Sep 09 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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
innoDB(3) DBLink(1) ctypes(1) 复读(1) 经纬度(1) 幻读(5) 事务并发(1) MVCC(4) C/C++(1) 间隙锁(2)
You might like
坏狼的PHP学习教程之第1天
2008/06/15 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
javascript[js]获取url参数的代码
2007/10/17 Javascript
jquery中this的使用说明
2010/09/06 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
从零学习node.js之搭建http服务器（二）
2017/02/21 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
详解python持久化文件读写
2019/04/06 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
python exit出错原因整理
2020/08/31 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
中层竞聘演讲稿
2014/01/09 职场文书
工会经费申请报告
2015/05/15 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
钱学森电影观后感
2015/06/04 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js