uniapp时间日期选择器 - 只选择月份 - 月份选择器picker

最新推荐文章于 2025-03-12 15:12:11 发布

Rudon滨海渔村

最新推荐文章于 2025-03-12 15:12:11 发布

阅读量1w

点赞数 5

分类专栏： Web前端开发文章标签： uniapp HBuilder 小程序

本文链接：https://blog.csdn.net/qq285744011/article/details/123717250

版权

开发同时被 2 个专栏收录

242 篇文章

订阅专栏

Web前端

119 篇文章

订阅专栏

该博客展示了如何在uni-app中实现一个日期选择器组件，通过`<picker>`标签结合`date`模式，用于选取月份。代码示例中详细说明了如何绑定值并处理日期变化事件，同时提供了一个获取当前月份的辅助函数。此功能适用于前端界面中的日期输入场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

完整代码

<template>
	<view>
		<picker mode="date" fields="month" :value="date" @change="bindDateChange">
			<view class="uni-input">{{date}}</view>
		</picker>
	</view>
</template>

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

<style>

</style>