• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

Vue.js中使用Element-UI中的date-picker默认数据绑定问题

Frame/Browser 薛 陈磊 136次浏览 0个评论 扫描二维码

一个小例子,话不多说看需求:

Vue.js中使用Element-UI中的date-picker默认数据绑定问题

如图页面上有周和月两个时间选项,默认要进行周查询,所以date-picker要绑定周的范围,而date-picker虽然选择的是周的类型,但是绑定依然是一个时间点,并不是一个时间范围,要查询的时候需要的开始时间点和结束时间点,结束时间点时根据开始时间点加七天另算的;

date-picker绑定如下:

<el-date-picker v-model="value1" type="week" format="yyyy 第 WW 周" :picker-options="pickerOptions" placeholder="选择周" v-if="radios=='周'" :clearable="false" :default-value="weekstart">

解决的思路也就是获取当前的星期天数(getDay(),1-6星期一-星期6,0为周日,),然后当前时间根据星期几减去相应天数并向前推7天(例子中周一为起始),在挂载页面的时候,以这个时间为开始时间,延后7天为结束时间传给后端(是的后端需要开始和结束两个时间参数);

 export default {
	data() {
		return {
			radios: '周',
			value1: '',
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now() - 8.64e7;
				},
				firstDayOfWeek: 1
			},
			stime: ''
		};
	},
	computed: {
		weekstart() {
			var today=new Date();
			var week=today.getDay();
			
			var t=today.getTime()-1000*60*60*24*(week - 1 + 7);
			var t= week== 0 ? today.getTime()-1000*60*60*24*(6 + 7) : today.getTime()-1000*60*60*24*(week - 1 + 7);
			var startime=new Date(t);
//			return startime.getFullYear()+"-"+startime.getMonth()+1+"-"+startime.getDate();
			return startime;
		}
	},
	created() {
		this.getList();
	},
	filters: {},
	methods: {
		getList() {
			// searching
		},
		selectedtime() {
			var startime = this.selecttime[0].getFullYear() + this.selecttime[0].getMonth() * 30 + this.selecttime[0].getDate();
			var endtime = this.selecttime[1].getFullYear() + this.selecttime[1].getMonth() * 30 + this.selecttime[1].getDate();
			if(endtime - startime > 60) {
				this.selecttime = this.getlastday();
				this.$message.error('最大的搜索范围是两个月');
			}

		},
		formatDate(val) {
			if(val) {
				val = new Date(val);
				let year = val.getFullYear();
				let month = val.getMonth() + 1;
				let date = this.radios == '周' ? val.getDate() : val.getDate();
				console.log("data is" + val.toLocaleDateString())
				return year + '-' + month + '-' + date;
			} else {
				return ''
			}
		}
	}
};

这里吐槽一下月模式的情况下(也是个时间点不是范围),实际的值不是所选中的比如2017-05,而是2017-04-30T16:00:00.000Z,难道不是应该22017-05-01起始吗? 呵呵


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明Vue.js中使用Element-UI中的date-picker默认数据绑定问题
喜欢 (0)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端Coder,中二非文艺闷骚少年,喜欢动漫、历史、暗荣三国志和游山玩水,关注互联网发展,期待遇到更多小伙伴一起吹水玩耍;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址