日期选择器
<template>
<view>
<view class="box_date">
<view>
<text>请选择日期:</text>
</view>
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="changeDate">
<view class="date">
<input type="text" disabled="true" v-model="date">
</view>
</picker>
</view>
</view>
</template>
<script>
function getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 10;
} else if (type === 'end') {
year = year + 10;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
export default {
data() {
return {
date: getDate(), //当前日期
startDate: getDate('start'), //可选择的最小日期
endDate: getDate('end'), //可选择的最大日期
};
},
methods: {
changeDate(e){
this.date = e.detail.value;
console.log('选择的日期:',this.date)
},
}
};
</script>
<style >
.box_date{
margin: 20upx;
display: flex;
}
.date{
border: 1px solid #ccc;
padding: 10upx;
width: 300upx;
}
.box_date text{
line-height: 60upx;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/db7b3e88d76f7ce0254c20a887c18675.png)
时间选择器
<template>
<view>
<view class="box_time">
<view>
<text>请选择时间:</text>
</view>
<picker mode="time" :value="time" :start="minTime" :end="maxTime" @change="changeTime">
<view class="time">
<input type="text" disabled="true" v-model="time">
</view>
</picker>
</view>
</view>
</template>
<script>
function getTime(){
const time = new Date();
let hour = time.getHours();
let minute = time.getMinutes();
hour = hour > 9 ? hour : '0' + hour;
minute = minute > 9 ? minute : '0' + minute;
return `${hour}:${minute}`;
}
export default {
data() {
return {
time: getTime(), //当前时间
minTime: '09:00', //可选择的最小时间
maxTime: '18:00' //可选择的最大时间
};
},
methods: {
changeTime(e) {
this.time = e.detail.value
}
}
};
</script>
<style >
.box_time{
margin: 20upx;
display: flex;
}
.time{
border: 1px solid #ccc;
padding: 10upx;
width: 300upx;
}
.box_time text{
line-height: 60upx;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/ff0e8cd9b1dfce2e9f9fdabae4db4072.png)