开始时间小于 结束时间 js_js 时间选择框

<template>
    <view>
       
		<view class="popup_1 flex_between">
			<view class="popup_1_title flex_start">
				<text class="image_subling-text">日期范围</text>
			</view>
					
			<text class="closeBtn" @click="closePopup">x</text>
		</view>
		
		<view class="picker_list flex_between ">
			<view class="picker_list_item" :class="[curIndex == 0?'borderColor':'']">
				 <view class="uni-title"  @tap="getDateInput(0)"  id="starttime" v-if="dateArr[0].year != '' || dateArr[0].month != '' || dateArr[0].day != '' ">{{starttime}}</view>
				 <view class="uni-title"  @tap="getDateInput(0)"  v-else>开始时间</view>
			</view>
			<view class="zhi">至</view>
			<view class="picker_list_item" :class="[curIndex == 1?'borderColor':'']">
				 <view class="uni-title"  @tap="getDateInput(1)" id="endtime"  v-if="dateArr[1].year != '' || dateArr[1].month != '' || dateArr[1].day != ''">{{endtime}}</view>
				 <view class="uni-title"  @tap="getDateInput(1) " v-else>结束时间</view>
			</view>
		</view>
		<view  class="riqi">
			<text>选择日期</text>
		</view>
		
        <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" style="margin-top:20px;margin-bottom:50px;">
            <picker-view-column  class="pcikerStyle">
                <view class="item" v-for="(item,index) in years" :key="index" >{{item}}年</view>
            </picker-view-column>
           <picker-view-column  class="pcikerStyle">
                <view class="item" v-for="(item,index) in months" :key="index" >{{item}}月</view>
            </picker-view-column>
            <picker-view-column  class="pcikerStyle">
                <view class="item" v-for="(item,index) in days" :key="index" >{{item}}日</view>
            </picker-view-column>
        </picker-view>
		
		<view class="popup_buttons flex_between">
			 <button class="view_btn" @tap="resetDate">重置</button>
			 <button class="view_btn" @tap="completeDate">完成</button>
		</view>
		
    </view>
</template>

<script>
	export default {
	    data: function () {
			 
	        const date = new Date()
	        const years = []
	        const year = date.getFullYear()
	        const months = []
	        const month = date.getMonth() + 1
			let monthDays = new Date(year,month,0).getDate();
			
	        const days = []
	        const day = date.getDate()
	        for (let i = 1990; i <= date.getFullYear(); i++) {
	            years.push(i)
	        }
	        for (let i = 1; i <= 12; i++) {
	            months.push(i)
	        }
	        for (let i = 1; i <= monthDays; i++) {
	            days.push(i)
	        }
	        return {
				curIndex:0,
	            title: 'picker-view',
	            years,
	            months,
	            days,
	            dateArr:[
					{
					  year:'',
					  month:'',
					  day:''
					},
					{
					  year:'',
					  month:'',
					  day:''
					}
				],
	            value: [9999, month - 1, day - 1],
	            visible: true,
	            indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
	        }
	    },
		computed:{
			starttime(){
				return `${this.dateArr[0].year}-${this.dateArr[0].month}-${this.dateArr[0].day}`
			},
			endtime(){
				return `${this.dateArr[1].year}-${this.dateArr[1].month}-${this.dateArr[1].day}`
			}
		},
	    methods: {
			//时间变化
	        bindChange: function (e) {
				const val = e.detail.value;
				let monthDays = new Date(this.years[val[0]],this.months[val[1]],0).getDate();
				this.days.length = 0;
				
				for(var i =1; i<= monthDays;i++){
					 this.days.push(i);
				}
			    
	            this.dateArr[this.curIndex].year = this.years[val[0]]
				
	            this.dateArr[this.curIndex].month = this.months[val[1]]

	            this.dateArr[this.curIndex].day = this.days[val[2]]
	        },
			
			//获取当前是开始时间还是结束时间
			getDateInput(curIndex){
			    this.curIndex = curIndex;
				let temp;
			    if(this.curIndex == 0){
					temp = this.starttime.split('-').map(Number);
				}else{
					temp = this.endtime.split('-').map(Number);
				}
			  
				if(temp[0] < 3){
					let now = new Date();
					temp = [this.years.indexOf(now.getFullYear()), now.getMonth(), now.getDate() - 1];
				}else{
					temp[0] = this.years.indexOf(temp[0]);
					temp[1] = temp[1] - 1;
					temp[2] = temp[2] - 1;
				}
				this.value = temp;
			},
			
			
						
			//reset时间
			resetDate(){
				let time = new Date();
				let day_s = new Date(time.getFullYear(), time.getMonth() + 1, 0).getDate()
				
				this.days.length = 0;
				for(var i=1;i<=day_s;i++){
					this.days.push(i) //重新获取本月多少天
				}
			
				let curTime = [9999,time.getMonth(), time.getDate()];
				
			    this.value = curTime;
	
				for(var i=0;i<this.dateArr.length;i++){
					this.dateArr[i].year = '';
					this.dateArr[i].month = '';
					this.dateArr[i].day = '';
				}

				let data = {
					starttime:null,
					endtime:null,
					reset:true
				}

				 this.$emit('rangtime',data)
			},
			//字符串转日期
			stringToDate(str){
				    var tempStrs = str.split(" ");
				
				    var dateStrs = tempStrs[0].split("-");
				
				    var year = parseInt(dateStrs[0], 10);
				
				    var month = parseInt(dateStrs[1], 10) - 1;
				
				    var day = parseInt(dateStrs[2], 10);
					
				    var date = new Date(year, month, day);
				
				    return date;
			},

			//选择完时间后点击完成
			completeDate(){
				let data = {
					starttime:this.dateArr[0].year+'-'+this.dateArr[0].month+'-'+this.dateArr[0].day,
					endtime:this.dateArr[1].year+'-'+this.dateArr[1].month+'-'+this.dateArr[1].day,
					reset:false
				}
				if( this.dateArr[0].year == "" &&  this.dateArr[1].year != "" ){
					  uni.showToast({
					  	icon:'none',
					  	title:'开始时间不能为空！'
					  })
					return;
				}else if( this.dateArr[0].year != "" &&  this.dateArr[1].year == "" ){
						uni.showToast({
							icon:'none',
							title:'结束时间不能为空！'
						})
					return;
				}else if(this.dateArr[0].year == "" &&  this.dateArr[1].year == ""){
					data = {
						starttime:null,
						endtime:null,
						reset:false
					}
				}
				
				
				if(this.stringToDate(this.endtime) < this.stringToDate(this.starttime)){
					uni.showToast({
						 icon:'none',
						 title:'结束时间小于开始时间！'
					})
					return ;
				}
				
				 this.$emit('rangtime',data)
				
			},
			closePopup(){
				this.$emit('closePup',{
					show:false
				})
			}
			
	    },
		watch:{
			
		}
	}
</script>

<style scoped>
	
	.flex_center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.flex_start{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.flex_end{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.flex_between{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex_around{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.flex_baseline{
			display: flex;
			justify-content: space-between;
			align-items: baseline;
	}
	.marginL16{
		   margin-left:16px;
	}
	.marginR16{
		   margin-right:16px;
	}
	.dateTool .imageWrap{
		  width:30upx;
		  height:30upx;
		  border:1px solid red;
		  margin-right:10px;
	}
	.dateTool .imageWrap image{
		  width:100%;
		  height:100%;
	}
	.dateTool text{
		  color: rgba(175, 175, 175, 1);
		  font-size: 28upx;
		  text-align: left;
		  font-family: PingFangSC-Regular;
	}
	.popup_1_imgWrap{
		width:40upx;
		height:40upx;
	}
	.popup_1_imgWrap image{
		width:100%;
		height:100%;
	}
	.popup_2{
		  padding:20upx 0;
	}
	
	.popup_2 text{
		line-height: 64upx;
		text-align: left;
		font-family: PingFangSC-Medium;
	}
	.picker_list{
		  margin-top:48upx;
	}
	
	.picker_list .picker_list_item{
		 height:72upx;
		 border-radius: 1px;
		 background-color: rgba(251, 251, 251, 1);
		 border: 0.5px solid rgba(217, 218, 219, 1);
		 width:294upx;
		 line-height: 72upx;
		 color: rgba(77, 119, 218, 1);
		 font-size: 14px;
		 text-align: center;
		 font-family: PingFangSC-Regular;
	}
	
	.image_subling-text{
		line-height: 32upx;
		color: rgba(61, 63, 67, 1);
		font-size: 32upx;
		text-align: left;
		font-family: PingFangSC-Medium;
	}
	.zhi{
		  line-height: 28upx;
		  color: rgba(61, 63, 67, 1);
		  font-size: 28upx;
		  text-align: left;
		  font-family: PingFangSC-Regular;
	}
	.closeBtn{
		  color:#848589;
		  width:20px;
		  height:20px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
	}
	.popup_buttons{
		  width:100%;
		  margin-top:20px;
	}
	.popup_buttons .view_btn {
		   line-height: 40px;
		   color: rgba(77, 119, 218, 1);
		   font-size: 16px;
		   text-align: center;
		   font-family: PingFangSC-Regular;
		   width: 140px;
		   height: 40px;
		   border-radius: 4px;
		   background-color: rgba(238, 242, 251, 1);
	}
	.popup_buttons .view_btn:nth-child(2){
		  background-image: linear-gradient(#4E8EFE, #4D74FF);
		  color:#fff;
	}
	.riqi{
		margin-top:20px;
		margin-bottom:10px;
		line-height: 14px;
		color: rgba(61, 63, 67, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-Regular;
	}
	.pcikerStyle{
		height:180px;
		text-align: center;
		line-height:50px;
		font-size: 14px;

	}
	.borderColor{
		border: 0.5px solid #4D74FF !important;
	}
</style>