elementUI + moment.js 日期选择器（年、月、日、周、季度）

elementUI + moment.js 日期选择器（年、月、日、周、季度）

1、年year

<template>
	<el-date-picker
	    v-model="yearDate"
	    type="year"
	    format="yyyy"
	    value-format="yyyy"
	    placeholder="选择日期">
	</el-date-picker>
</template>

2、月month

<template>
	<el-date-picker
	    v-model="monthDate"
	    type="month"
	    format="yyyy-MM"
	    value-format="yyyy-MM"
	    placeholder="选择日期">
	</el-date-picker>
</template>

3、日date

<template>
	<el-date-picker
	    v-model="dateDate"
	    type="date"
	    format="yyyy-MM-dd"
	    value-format="yyyy-MM-dd"
	    placeholder="选择日期">
	</el-date-picker>
</template>

4、周week

<template>
	<el-date-picker
	    v-model="weekDate"
	    type="week"
	    format="yyyy 第 WW 周"
	    value-format="yyyy-MM-dd"
	    placeholder="选择日期">
	</el-date-picker>
</template>
<script>
	// moment.js安装：npm install moment --save
	// moment.js官网地址：https://momentjs.cn/
    import moment from 'moment'
    export default {
        name: "index",
        data () {
            return {
                weekDate: "",
            }
        },
        methods: {
            clickSearch() {
                const currentDate = moment(this.weekDate);
                const startOfWeek = currentDate.startOf('week').format('YYYY-MM-DD');
                const endOfWeek = currentDate.endOf('week').format('YYYY-MM-DD');
                console.log(startOfWeek, endOfWeek); // 2023-12-31 2024-01-06
            }
        }
    }
</script>

5、季度

季度选择器需根据elementUI自行开发页面显示插件，自行取值季度区间即可。

<script>
	// moment.js安装：npm install moment --save
	// moment.js官网地址：https://momentjs.cn/
    import moment from 'moment'
    export default {
        methods: {
            clickSearch() {
            	// 获取当前时间所在季度，返回值为 1、2、3、4
                const currentDate = moment("2023-12-20");
                console.log(currentDate.quarter()); // 4
            }
        }
    }
</script>