週ピッカーコンポーネントを実装する

1. 要件:

デフォルトでは、図に示すように、毎月の第 1 月曜日がその月の第 1 週になります。

2. 使用したツール:

vue2+vant2+momentjs

3. 親コンポーネント:

データに関係するパラメータを定義する

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. 表示効果は図に示すとおりです。