uniapp时间选择

文章描述:

uniapp时间选择调用picker,在input里面使用开始时间和结束时间


template

<template>
	<view class="page">
		<view class="container">
			<view class="default">
			     <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			         <view class="uni-input">{{date}}</view>
			     </picker>
			</view>
			<view class="li">
				<view class="lab">开始时间</view>
				<view class="val" >
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChangeStart">
					    <input type="text" v-model="pointstarttime"/>
					</picker>
				</view>
			</view>
			<view class="li">
				<view class="lab">结束时间</view>
				<view class="val" >
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChangeEnd">
					    <input type="text" v-model="pointendtime"/>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

script

var _self;
export default{
	 data() {
		const currentDate = this.getDate({
	        format: true
	    })
	    return {
	        date: currentDate,
			
			pointstarttime:"",
			pointendtime:"",
			
	    }
		
		
	},
	computed: {
	    startDate() {
	        return this.getDate('start');
	    },
	    endDate() {
	        return this.getDate('end');
	    }
	},
	onLoad() {
		_self = this;
	},
	methods: {
		//结束时间
		bindDateChangeEnd:function(e){
			_self.pointendtime = e.target.value;
		},
		//开始时间
	    bindDateChangeStart:function(e){
			_self.pointstarttime = e.target.value;
		},
	    bindDateChange: function(e) {
	        this.date = e.target.value
	    },
	    getDate(type) {
	        const date = new Date();
	        let year = date.getFullYear();
	        let month = date.getMonth() + 1;
	        let day = date.getDate();
	
	        if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        }
    }
}

style

.container{
	padding: 30upx 34upx;
}
.default{
	margin-bottom: 10upx;
}
.li{
	margin-bottom: 10upx;
}
.li .lab{
	margin-bottom: 10upx;
}
input{
	border:1upx solid #E3E3E3;
	padding: 14upx 0;
}

 

发布时间:2021/12/13

发表评论