Renderings:
picker time period selection
It is necessary to introduce moment.js, it is possible that an error will be reported in the project after introduction, you can consider introducing the selection date as a component
1. timepage.vue component encapsulation
<template>
<view>
<picker mode="multiSelector" :value="dateTimeIndex" :range="dateTimeArray" range-key="name"
@change="dateTimeChange">
<view class="uni-input">
<text v-if="travelDate===''" style="color:#bbb">请选择</text>
<text v-else>{
{
moment(travelDate).format('YYYY年MM月DD日 HH:00')}}</text>
</view>
</picker>
</view>
</template>
<script>
import moment from '../../utils/moment.js'
const dateTimeObj = (() => {
const dateArr = []
for (let i = 0; i < 50; i++) {
// 默认50天
const itemDate = moment().add(i, 'day');
dateArr.push({
name: `${
itemDate.format('YYYY年MM月DD日')}`,
value: itemDate.format('YYYY-MM-DD')
})
}
const timeHHArr = [];
for (let i = 0; i < 24; i++) {
let str = i < 10 ? `0${
i}:00` : `${
i}:00`
timeHHArr.push({
name: str,
value: str
})
}
return {
dateArr,
timeHHArr
}
})()
export default {
components: {
},
props:{
travelDate:{
type:String,
default: ''
},
dateTimeIndex:{
type: Array,
default: function () {
return [0, 0]
}
}
},
data() {
return {
moment: moment,
dateTimeArray: [
dateTimeObj.dateArr,
dateTimeObj.timeHHArr
], //二维数组，长度是多少是几列
// dateTimeIndex: [0, 0],
}
},
methods: {
dateTimeChange: function(e) {
const d = dateTimeObj.dateArr[e.detail.value[0]].value
const h = dateTimeObj.timeHHArr[e.detail.value[1]].value
this.$emit("timeSelect", `${
d} ${
h}`,e.detail.value);
}
}
}
</script>
<style lang="scss" scoped>
.items{
margin-bottom: 18rpx;
}
.items-text{
font-size: 30rpx;
line-height: 40rpx;
letter-spacing: 1rpx;
color: #333333;
margin-bottom: 19rpx;
}
.select-input{
width:100%;
height: 88rpx;
line-height: 88rpx;
border-radius: 10rpx;
border: 1rpx solid #BDBDBD;
padding-left: 22rpx;
box-sizing:border-box;
}
.time-select{
display: flex;
justify-content: space-evenly;
padding-left: 0;
font-size:30rpx;
}
</style>
2. Download the moment.js download address
from the official website 3. Reference the time component in the page that needs to display the time component
<template>
<view class="items">
<view class="items-text">请选择时间段 (必填)</view>
<view class="select-input time-select">
<time-page @timeSelect="timeSelectStart" :dateTimeIndex="startDateTimeIndex" :travelDate="startClearingTime"></time-page>至
<time-page @timeSelect="timeSelectEnd" :dateTimeIndex="endDateTimeIndex" :travelDate="endClearingTime"></time-page>
</view>
</view>
<button class="btn-item " @click="toSubmit">提交</button>
</template>
<script>
import timePage from '@/components/timepage/timepage.vue';
export default {
data() {
const currentDate = this.getDate({
format: true
})
return {
startTimeNow: currentDate,//当前时间
startClearingTime: '', //开始时间
startDateTimeIndex:[0,0],//开始时间默认选择
endClearingTime: '', //结束时间
endDateTimeIndex:[0,0],//结束时间默认选择
}
},
components: {
timePage
},
methods: {
// 当前时间
getDate() {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hour = date.getHours();
let minute = date.getMinutes();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
hour = hour > 9 ? hour : '0' + hour;
minute = minute > 9 ? minute : '0' + minute;
return `${
year}-${
month}-${
day} ${
hour}:${
minute}`;
},
// 提交
toSubmit: function() {
//以下为判断条件：非空判断、开始时间不得晚于结束时间、开始时间不得早于当前时间
if (this.startClearingTime.length == 0) {
uni.showToast({
icon: 'none',
title: "请选择开始时间",
})
return
}
if (this.startClearingTime < this.startTimeNow) {
uni.showToast({
icon: 'none',
title: "请在当前时间后选择时间段",
})
return
}
if (this.endClearingTime.length == 0) {
uni.showToast({
icon: 'none',
title: "请选择结束时间",
})
return
}
if (this.startClearingTime > this.endClearingTime) {
uni.showToast({
icon: 'none',
title: "开始时间不得晚于结束时间",
})
return
}
}
}
}