空境界

<template>
   <div>
      <p class="title-date" v-if="isTitle">Select Dates</p>
      <vue-ctk-date-time-picker
         :no-label="true"
         :range="true"
         :custom-shortcuts="shortcuts"
         formatted="YYYY/MM/DD"
         format="YYYy/MM/DD"
         disabled-dates="disabledDates"
         v-model="date"
         @is-hidden="validateDate"
         @validate="validateDate"
         id="range"
      >

      </vue-ctk-date-time-picker>
   </div>
</template>

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

   // Service
   import VueCtkDateTimePicker from 'vue-ctk-date-time-picker';
   import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';
   import moment from 'moment';

   @Component({
      components: {VueCtkDateTimePicker},
   })
   export class DateRange extends Vue {
      private date: any = {
         end: undefined,
         shortcut: undefined,
         start: undefined,
      };

      @Prop({
         type: Boolean,
         default: true,
      })
      isTitle: boolean;

      @Prop({
         type: Object,
         default: () => {
            return {
               end: undefined,
               shortcut: undefined,
               start: undefined,
            };
         },
      })
      dateRange: string;

      @Prop({
         type: Array,
         default: () => [],
      })
      disabledDates: string[];

      private datetime = Datetime;

      private shortcuts: any[] = [];

      created() {
      }

      mounted() {
         this.initComponents();
         this.validateDate();
      }

      initComponents() {
         this.date = this.dateRange;

         let element = document.getElementById('range-input');

         this.shortcuts = [
            {key: 'today', label: 'Today', value: 'day'},
            {key: 'yesterday', label: 'Yesterday', value: '-day'},
            {key: 'last7Days', label: 'Last 7 Days', value: 7},
            {key: 'thisWeek', label: 'This Week', value: 'week'},
            {key: 'lastWeek', label: 'Last Week', value: '-week'},
            {key: 'thisMonth', label: 'This Month', value: 'month'},
            {key: 'lastMonth', label: 'Last Month', value: '-month'},
            {
               key: 'q1',
               label: 'Q1',
               value: () => {
                  return {
                     start: moment([new Date().getFullYear(), 0, 1]).month(0),
                     end: moment([new Date().getFullYear(), 0, 31]).month(2),
                  };
               },
            },
            {
               key: 'q2',
               label: 'Q2',
               value: () => {
                  return {
                     start: moment([new Date().getFullYear(), 0, 1]).month(3),
                     end: moment([new Date().getFullYear(), 0, 30]).month(5),
                  };
               },
            },
            {
               key: 'q3',
               label: 'Q3',
               value: () => {
                  return {
                     start: moment([new Date().getFullYear(), 0, 1]).month(6),
                     end: moment([new Date().getFullYear(), 0, 30]).month(8),
                  };
               },
            },
            {
               key: 'q4',
               label: 'Q4',
               value: () => {
                  return {
                     start: moment([new Date().getFullYear(), 0, 1]).month(9),
                     end: moment([new Date().getFullYear(), 0, 31]).month(11),
                  };
               },
            },
            {key: 'thisYear', label: 'This Year', value: 'year'},
         ];
      }


      validateDate() {
         if (this.date.end === null) {
            // todo: something
         }

         let date: {
            startDate: Date;
            endDate: Date;
         } = {
            startDate: new Date(this.date.start),
            endDate: new Date(this.date.end),
         };
         // todo: something
      }

   }

   export default DateRange;
   Vue.component('date-range', DateRange);
</script>

<style lang="scss" scoped>
   .title-date {
      margin-bottom: 0.7em;
   }
</style>