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

比眉伴天荒 2024-04-17 06:08 9阅读 0赞

HTML部分

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.month;
    		for ( let i=0;i<this.years.length;i++) {
    			if (this.year == this.years[i]) {   // 判断当前循环到的年份是否是本年，是的话则月份不可以超过当前月份
    				for (let j=0; j<this.month; j++) {
    					const date = this.years[i] + "-" + this.months[j]
    					this.currDate.push(date)
    				}
    			} else {
    				for (let j=0; j<this.months.length;j++) {  //其他年份
    					const date = this.years[i] + "-" + this.months[j]
    					this.currDate.push(date)
    				}
    			}
    		}
    		this.currDate.reverse();   //将时间倒序排列
        },
        methods: {
            onDateChange: function (e) {
    			const val = e.detail.value
    			this.time = this.currDate[val];
                // 时间选择完成了，这之后就可以做一些其他的事情啦
    		},
        }
    }

附上一张Android的效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg_size_16_color_FFFFFF_t_70][]

嗯……大概就是这样，有问题的话请大家帮忙指出~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/72ae6e594b3148a695540b70e24336e9.jpg