uniapp时间选择
文章描述:
uniapp时间选择调用picker,在input里面使用开始时间和结束时间
template
<template>
<view class="page">
<view class="container">
<view class="default">
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="uni-input">{{date}}</view>
</picker>
</view>
<view class="li">
<view class="lab">开始时间</view>
<view class="val" >
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChangeStart">
<input type="text" v-model="pointstarttime"/>
</picker>
</view>
</view>
<view class="li">
<view class="lab">结束时间</view>
<view class="val" >
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChangeEnd">
<input type="text" v-model="pointendtime"/>
</picker>
</view>
</view>
</view>
</view>
</template>
script
var _self;
export default{
data() {
const currentDate = this.getDate({
format: true
})
return {
date: currentDate,
pointstarttime:"",
pointendtime:"",
}
},
computed: {
startDate() {
return this.getDate('start');
},
endDate() {
return this.getDate('end');
}
},
onLoad() {
_self = this;
},
methods: {
//结束时间
bindDateChangeEnd:function(e){
_self.pointendtime = e.target.value;
},
//开始时间
bindDateChangeStart:function(e){
_self.pointstarttime = e.target.value;
},
bindDateChange: function(e) {
this.date = e.target.value
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
}
}
style
.container{
padding: 30upx 34upx;
}
.default{
margin-bottom: 10upx;
}
.li{
margin-bottom: 10upx;
}
.li .lab{
margin-bottom: 10upx;
}
input{
border:1upx solid #E3E3E3;
padding: 14upx 0;
}
发布时间:2021/12/13
发表评论