空境界

<template>
    <div class="animated fadeIn">

        <div class="flex-right">

            <date-picker
                :format="datetime.FormatDate"
                :title-format="datetime.FormatDate"
                :placeholder="_('w_DateSelectDates')"
                :range="true"
                :clearable="false"
                type="date"
                class="col-md-3"
                v-model="inputDatum.dateRange"
                @input="updateDateRange"

            >
                <template v-slot:sidebar="{ emit }">
                    <div style="text-align: left">
                        <button class="mx-btn mx-btn-text col-md-12" @click="selectToday(emit)">Today</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectYesterday(emit)">Yesterday</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectLast7days(emit)">Last 7 days</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectThisWeek(emit)">This Week</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectLastWeek(emit)">Last Week'</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectThisMonth(emit)">This Month</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectLastMonth(emit)">Last Month</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectQ1(emit)">Q1</button>
                        
                        <button class="mx-btn mx-btn-text col-md-12" @click="selectQ2(emit)">Q2</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectQ3(emit)">Q3</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectQ4(emit)">Q4</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectThisYear(emit)">This Year</button>
                    </div>
                </template>
            </date-picker>
        </div>
    </div>
</template>

<script lang="ts">
import {Vue, Component} from "vue-property-decorator";

// Service
import Datetime from "@/services/Datetime";

import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';


interface IInputDatum {
    dateRange: any[];
}

@Component({
    components: { DatePicker }
})
export default class DatePicker extends Vue {

    //////////////////// 變數  ////////////////////
    private inputDatum: IInputDatum = {
        dateRange: [Datetime.DateStart(new Date()), Datetime.DateEnd(new Date())],
    };

    private datetime = Datetime;

    ///////////////// date range /////////////////
    // emit格式：Date陣列 = [開始時間：結束時間]
    selectToday(emit) {
        emit([Datetime.DateStart(new Date()), Datetime.DateStart(new Date())]);
    }

    selectYesterday(emit) {
        emit([Datetime.DatePlus(new Date(), -1), Datetime.DatePlus(new Date(), -1)]);
    }

    selectLast7days(emit) {
        emit([Datetime.DatePlus(new Date(), -6), Datetime.DatePlus(new Date(), 0)]);
    }

    selectThisWeek(emit) {
        emit([Datetime.WeekStart(new Date()), Datetime.WeekEnd(new Date())]);
    }

    selectLastWeek(emit) {
        emit([Datetime.WeekPrevSunday(new Date()), Datetime.WeekPrevSaturday(new Date())]);
    }

    selectThisMonth(emit) {
        emit([Datetime.MonthStart(new Date()), Datetime.MonthEnd(new Date())]);
    }

    selectLastMonth(emit) {
        emit([Datetime.LastMonthStart(new Date()), Datetime.LastMonthEnd(new Date())]);
    }

    selectQ1(emit) {
        emit([Datetime.Q1Start(new Date()), Datetime.Q1End(new Date())]);
    }

    selectQ2(emit) {
        emit([Datetime.Q2Start(new Date()), Datetime.Q2End(new Date())]);
    }

    selectQ3(emit) {
        emit([Datetime.Q3Start(new Date()), Datetime.Q3End(new Date())]);
    }

    selectQ4(emit) {
        emit([Datetime.Q4Start(new Date()), Datetime.Q4End(new Date())]);
    }

    selectThisYear(emit) {
        emit([Datetime.YearStart(new Date()), Datetime.YearEnd(new Date())]);
    }

}
</script>