element-ui时间选择快捷赋值今天、今月、今年

element-ui时间选择快捷赋值今天、今月、今年

• 点击今日，本月，今年赋值给elementUI时间组件，同时选择框也可以进行时间选择。

如图:

index.vue

<template>
    <div class="dashboard-editor-container">
               <div class="chart-releaseTimeout">
                    <div class="title_frame">
                        <div class="title">放行超时统计
                            <div class="title_fast">
                                <el-button type="text" plain size="mini" round   @click="getByDayTimeOut">今日</el-button>
                                <el-button type="text" plain size="mini" round   @click="getByMonthTimeOut">本月</el-button>
                                <el-button type="text" plain size="mini" round   @click="getByYearTimeOut">今年</el-button>
                                <div class="date_title">
                                    <el-date-picker
                                        v-model="formData.selectReleaseTimeoutDate"
                                        type="daterange"
                                        align="right"
                                        size = "small"
                                        range-separator="至"
                                        start-placeholder="开始月份"
                                        end-placeholder="结束月份"
                                        value-format ="yyyy-MM-dd"
                                        @change="getByDateTimeOut">
                                    </el-date-picker>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--父组件选择的时间，传值给子组件 BarChartTimeOut -->
                    <div class="chart_bar">
                        <BarChartTimeOut :message-data="barChartTimeOut"/>
                    </div>
                </div>

</template>

export default {
    import BarChartTimeOut from "./components/BarChartTimeOut";
    import { Format } from "@/api/fault/utilsTime";
        name: "Index",
    export default {
        name: "Index",
        components: {
            BarChartTimeOut,
        },
        data() {
            return {
                //存放日期所选的值
                formData:{
                    selectReleaseTimeoutDate: '',
                },
                //父组件的值
                barChartTimeOut:[],
            };
        },
        created(){
        },
        methods: {
			//时间框选择
            getByDateTimeOut(){
                this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
                console.log("时间选择",this.barChartTimeOut);
            },
            //当天时间
            getByDayTimeOut(){
                const start = new Date().Format("yyyy-MM-dd");
                this.$set(this.formData,'selectReleaseTimeoutDate',[start,start]);
                this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
                console.log("当天选择",this.formData.selectReleaseTimeoutDate);
            },


            // 当前月第一天和最后一天
            getByMonthTimeOut(){
                let month = this.getMonth();
                console.log("fu当月超时选择",month);
                this.$set(this.formData,'selectReleaseTimeoutDate',month);
                this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
                console.log("当月时间选择",this.formData.selectReleaseTimeoutDate);
            },


            // 获取本年第一天和最后一天
            getByYearTimeOut(){
                let year = this.getYear();
                this.$set(this.formData,'selectReleaseTimeoutDate',year);
                this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
                console.log("当年时间选择",this.formData.selectReleaseTimeoutDate);
            },

            getMonth(){
                var date = new Date();
                var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
                var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
                return [firstDay.Format("yyyy-MM-dd"),lastDay.Format("yyyy-MM-dd")]
            },

            getYear(){
                var date = new Date();
                var now_year = date.getFullYear();
                var YearStart = new Date(now_year, 0, 1);
                var YearEnd = new Date(new Date(now_year, 11, 31));
                return [YearStart.Format("yyyy-MM-dd"),YearEnd.Format("yyyy-MM-dd")]
            },

        },
    };

utilsTime.js时间转换：

Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};