uniapp日期和时间选择效果
文章描述：
uniapp日期和时间选择效果与多个日期选择效果
日期
可以自定义多个日期选择
template
<template>
<view>
<view class="item">
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<view>{{ date }}</view>
</picker>
</view>
<!-- 新增开始时间 -->
<view class="item">
<picker mode="date" :value="dateStart" :start="startDate" :end="endDate" @change="bindDateStart">
<view>{{ dateStart }}</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({
format: true
}),
startDate: getDate('start'),
endDate: getDate('end'),
dateStart: getDate({
format: true
}),
};
},
methods: {
bindDateChange: function(e) {
this.date = e.detail.value;
},
// 新增开始
bindDateStart: function(e) {
console.log(e)
this.dateStart = e.detail.value;
}
}
}
时间
template
<template>
<view>
<picker mode="time" @change="bindTimeChange">
<view>{{ time }}</view>
</picker>
</view>
</template>script
export default {
data() {
return {
time: '12:00',
};
},
methods: {
bindTimeChange: function(e) {
this.time = e.detail.value;
}
}
}
发布时间：2022/08/29
发表评论