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

更新时间：2020-09-03 18:48:01 作者：startmvc

写这个文章主要是记录下用法，官网已经说的很详细了npminstallvue-datepicker--savehtml代码<myDa

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


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