uni-app日期选择器

叶茂林

发布于 2023-08-13 10:53:23

1.5K00

代码可运行

文章被收录于专栏：叶子的开发者社区叶子的开发者社区

运行总次数：0

代码可运行

写个简单的日期选择器，还没搞样式，所以有点丑

大概长这样吧

首先是这个picker选择器，mode选择日期，end是写一个范围前日期，:end就是这个日期是动态变化的，还有change函数

<template>
	<view>
		<view>发生时间</view>
		<picker mode="date" :end="endDate"@change="bindDateChange">
			<view>{{date}}</view>
		</picker>

	</view>
</template>

然后是脚本，就默认显示当前日期，设计最后范围日期为今日日期，再有一个事件函数

<script>
	export default {
		data() {
			return {
				date: this.getDate()
			}
		},
		computed:{
			endDate(){
				return this.getDate();
			}
		},
		methods: {
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value;
			}
		}
	}
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-08-11，如有侵权请联系 cloudcommunity@tencent.com 删除

app