uniapp实现日期区间的选择（默认获取当前时间）

古城微笑少年丶 2022-12-24 07:58 2082阅读 0赞

实现效果：![在这里插入图片描述][20201127142647533.png]  
h5：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 1]

data() { 
    			const currentDate = this.getDate({ 
    				format: true
    			})
    			const currentDate2 = this.getDate({ 
    				format: true
    			})
    			return { 
    				fontnum:0,
    				date: currentDate,
    				date2: currentDate2,

bindDateChange: function(e) { 
    				this.date = e.target.value
    			},
    			bindDateChange2: function(e) { 
    				this.date2 = 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}`;
    			},

computed: { 
    			startDate() { 
    				return this.getDate('start');
    			},
    			endDate() { 
    				return this.getDate('end');
    			}
    		},

## 默认获取当前时间 ##

getTime() { 
    				var date = new Date(),
    					year = date.getFullYear(),
    					month = date.getMonth() + 1,
    					day = date.getDate(),
    					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
    					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
    					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    				month >= 1 && month <= 9 ? (month = "0" + month) : "";
    				day >= 0 && day <= 9 ? (day = "0" + day) : "";
    				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
    				return timer;
    			}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 2]  
2.加载事件中赋值给starttime![在这里插入图片描述][20201130094054156.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 3]  
3.最终显示效果为左边

[20201127142647533.png]: /images/20221120/d728dd9c4d2c4ae8a18724e699861fe1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70]: /images/20221120/7b9783d82c3c4b57bdaef02cf90385d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020112714273959.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201130094027916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw,size_16,color_FFFFFF,t_70
[20201130094054156.png]: https://img-blog.csdnimg.cn/20201130094054156.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201130094127254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw,size_16,color_FFFFFF,t_70