vue+element 日期区间选择后提示是星期几_element 双击一个日期显示星期-优快云博客

本文介绍了一种在前端应用中实现日期范围选择器的方法，并详细解释了如何根据所选日期范围来动态更新显示的周选项。通过解析日期并计算间隔天数，能够智能地展示日期范围内的所有周日名称，适用于需要周视图的场景。

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

//日期区间

<el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期"
				 end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width:100%;" @change="handleChange">
				</el-date-picker>

export default {
		data() {
			return {
				weekOptions :['周日','周一', '周二', '周三', '周四', '周五', '周六'],
				checkedWeek: [],

			}
		},
		methods: {
			 handleChange(value) {
						this.weekOptions=['周日','周一', '周二', '周三', '周四', '周五', '周六']
			            if(!value) return
						let weekList=[]
						var date1 = new Date(Date.parse(value[0].replace(/-/g,   "/")));
						var date2 = new Date(Date.parse(value[1].replace(/-/g,   "/")));
						var iDays = parseInt(Math.abs(date2.getTime()- date1.getTime()) /1000/60/60/24); console.log(iDays)
						if(iDays>=7){
							weekOptions=['周日','周一', '周二', '周三', '周四', '周五', '周六']
						}else{
							let indexone=new Date(value[0]).getDay()
							let indextow=new Date(value[1]).getDay()
							this.weekOptions.forEach((item,index)=>{
									if(indexone<indextow){
										if(indexone<=index){
											if(indextow>=index){
												weekList.push(item)
											}
										}
									}else if(indexone>indextow){
										if(indexone<=index){
											weekList.push(item)
										}else if(indextow>=index){
											weekList.push(item)
										}
									}
							})
							this.weekOptions=weekList
						}
			        },
			//周选择
			checkedWeekChange(value) {
			//value 格式['2020-01-02','2020-01-04']
				//value.forEach((item, index) => {
					
				//})

			}
			
		}
	}

//单个日期

<el-date-picker 
    v-model="item.value" 
    type="date"
    value-format="yyyy-MM-dd"
    placeholder="选择日期"
    @change="dataChange" />
    const weekArr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
    //value.getDay() 可以得到当前的星期 不过是从索引0开始的 0,1,2,3,4,5,6 (0为星期一，1为星期二......)
export default {
    name: 'Home',
    data() {
        return {
            timeValue: '',
            input: ''
        }
    },
    methods: {
        handleChange(value) {
            if(!value) return
            const getWeek = value.getDay()
            this.input = weekArr[getWeek]
        }
    }
}