自己写的 uni-app 的日期选择器

最新推荐文章于 2025-06-12 17:10:57 发布

原创

最新推荐文章于 2025-06-12 17:10:57 发布 · 6k 阅读

5 ·

CC 4.0 BY-SA版权

这篇博客介绍了作者使用uni-app开发自定义日期选择器的过程，包括HTML和JS部分的实现细节，并展示了一张在Android设备上的运行效果截图。作者欢迎读者提出问题和建议。

HTML部分

<view class="uni-list-cell">
	<view class="uni-list-cell-left">选择时间</view>
	<view class="uni-list-cell-db">
		<picker mode="selector" :range="currDate" @change="onDateChange">
			<view class="uni-input" style="text-align: right;">{
  
  {time}}</view>
		</picker>
	</view>
</view>

JS部分

export default {
    data () {
        const date = new Date()
		const years = []
		const year = date.getFullYear()
		const months = []
		const month = date.getMonth() + 1
		for (let i = 2018; i <= date.getFullYear(); i++) {   //这里是以2018开始，也可以换成其他任意年份
			years.push(i);
		}
		for (let i = 1; i <= 12; i++) {
			months.push(i)
		}
        return {
            years,
			year,
			months,
			month,
			currDate: [],
			time: ''
        }
    },
    onload () {
        this.time = this.year + "-" + this.mon