vue中datepicker的使用教程实例代码详解
(编辑：jimmy 日期: 2024/11/12 浏览：2)
写这个文章主要是记录下用法，官网已经说的很详细了
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' ">{{item.active == 't' "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 "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的使用教程实例代码详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
上一篇：js图片无缝滚动插件使用详解