实现一个周选择器组件

1、需求:

默认每个月的第一个周一为该月的第一周开始,规则如图所示
实现一个周选择器组件_第1张图片

2、使用到的工具:

vue2+vant2+momentjs

3、父组件:

data中定义涉及到的参数

minDate: new Date(this.$moment().subtract(12,'month'))
maxDate: new Date(),
selectWeek: []

处理selectWeek,获取当前日期所在的周

getWeek() {
	// 当天是周几
	let weekDay = this.$moment().weekday();
	if(weekDay === 0) {
		// 周日
		weekDay = 7;
	}
	let monday = this.$moment().subtract(weekDay - 1, 'd').format('YYYY-MM-DD');
	let sunday = this.$moment().add(7 - weekDay, 'd').format('YYYY-MM-DD');
	return [monday, sunday]
}

4、周选择器组件:

<template>
	
	<van-picker
		ref="pickerWeek"
		@confirm="confirm"
		@change="handleChange"
		@cancel="cancel"
		show-toolbar
		title="选择周"
		:columns="columns"
		:item-height="$lessVariables.vanPickerItemHeight"/>
template>

文件参考资源文件:文件地址

5、展示效果如图:

实现一个周选择器组件_第2张图片

你可能感兴趣的:(Vue2,前端)