Renderings:
Auswahl des Auswahlzeitraums
Es ist notwendig, moment.js einzuführen. Es ist möglich, dass nach der Einführung ein Fehler im Projekt gemeldet wird. Sie können erwägen, das Auswahldatum als Komponente einzuführen
1. Kapselung der timepage.vue-Komponente
<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. Laden Sie die Download-Adresse
moment.js von der offiziellen Website herunter . 3. Verweisen Sie auf die Zeitkomponente auf der Seite, die die Zeitkomponente anzeigen muss
<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
}
}
}
}