date-range-picker

<template>
  <div class="date-rang-picker">
    <section>
      <div>
        <label for="filter_date_start">Початкова дата</label>
        <div class="position-relative" style="position: relative;">
          <input id="filter_date_start" type="text" class="form-control" placeholder="дд.мм.рррр" readonly
                  v-model="dateStartStr">
          <fp-icon class="calendar-icon" :name="'calendarToday'" @click="toggleStartDateCalendar"></fp-icon>
        </div>
        <div class="calendar-picker">
          <calendar :value="dateStartStr" :has-input="false"
                    :disable-before="dateStartDisableBefore"
                    :disable-after="dateStartDisableAfter"
                    :on-day-click="onStartDayClick"
                    v-if="showStartDateCalendar">
          </calendar>
        </div>
      </div>

      <div class="pad"><span class="line"></span></div>

      <div>
        <label for="filter_date_end">Кінцева дата</label>
        <div class="position-relative" style="position: relative;">
          <input id="filter_date_end" type="text" class="form-control" placeholder="дд.мм.рррр" readonly
                  v-model="dateEndStr">
          <fp-icon class="calendar-icon" :name="'calendarToday'" @click="toggleEndDateCalendar"></fp-icon>
        </div>
        <div class="calendar-picker">
          <calendar :value="dateEndStr" :has-input="false"
                    :disable-before="dateEndDisableBefore"
                    :disable-after="dateEndDisableAfter"
                    :on-day-click="onEndDayClick"
                    v-if="showEndDateCalendar">
          </calendar>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import dateUtil from '@/util/date'
import calendar from '@/components/common/calendar'

const msInDay = 24 * 3600 * 1000
const msInMonth = msInDay * 30
const today = new Date()

export default {
  name: 'DaterangePicker',
  components: {
    calendar
  },
  data () {
    return {
      dateStartStr: '',
      dateEndStr: '',
      dateStart: '',
      dateEnd: '',
      dirty: false,
      showStartDateCalendar: false,
      showEndDateCalendar: false,
      dateStartDisableBefore: null,
      dateStartDisableAfter: today,
      dateEndDisableBefore: null,
      dateEndDisableAfter: today
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    dateFrom: {
      type: String,
      default: ''
    },
    dateTo: {
      type: String,
      default: ''
    },
    dateFromDefault: {
      type: String,
      default: ''
    },
    dateToDefault: {
      type: String,
      default: ''
    }
  },
  created () {
    this.dateStartStr = this.dateFrom || this.dateFromDefault || ''
    this.dateStart = dateUtil.parse(this.dateStartStr)
    this.dateEndStr = this.dateTo || this.dateToDefault || ''
    this.dateEnd = dateUtil.parse(this.dateEndStr)

    if (!this.dateFrom && !this.dateTo && this.dateFromDefault && this.dateToDefault &&
        this.dateFrom !== this.dateFromDefault && this.dateTo !== this.dateToDefault) {
      this.dirty = true
    }
  },
  methods: {
    onStartDayClick (date, dateStr) {
      this.dateStart = date
      this.dateStartStr = dateStr
      this.showStartDateCalendar = false
      this.$emit('onDateStart', dateStr)
      // update end date threshold
      let threashold = new Date(date.getTime() + msInMonth)
      if (threashold > today) {
        threashold = today
      }
      this.dateEndDisableBefore = date
      this.dateEndDisableAfter = threashold

      if (!this.dateEnd) {
        this.dirty = true
        return
      }

      // update end date

      // can't be ealier than start date
      if (this.dateEnd < this.dateStart) {
        this.dateEnd = this.dateStart
      } else { // can't be later than today or start date + 30 days
        let maxEndDate = new Date(this.dateStart.getTime() + msInMonth)
        if (maxEndDate > today) {
          maxEndDate = today
        }
        // if (this.dateEnd > maxEndDate) {
        //   this.dateEnd = maxEndDate
        // }
      }

      this.dateEndStr = dateUtil.format(this.dateEnd, true)

      this.dirty = true
    },
    onEndDayClick (date, dateStr) {
      this.dateEnd = date
      this.dateEndStr = dateStr
      this.$emit('onDateEnd', dateStr)
      this.showEndDateCalendar = false
      this.dirty = !!this.dateStart
    },
    toggleStartDateCalendar () {
      if (!this.showStartDateCalendar) {
        this.showEndDateCalendar = false
      }
      this.showStartDateCalendar = !this.showStartDateCalendar
    },
    toggleEndDateCalendar () {

      if (!this.showEndDateCalendar) {
        this.showStartDateCalendar = false
      }
      this.showEndDateCalendar = !this.showEndDateCalendar
    },
    applyFilter () {
      const data = {
        from: this.dateStartStr,
        to: this.dateEndStr
      }

      this.$parent.$emit('applyDaterangeFilter', data)
      this.dirty = false
    },
    close () {
      this.$parent.$emit('closeDaterangeDialog')
    }
  }
}
</script>

<style scoped>

header h5 {
  margin-top: 10px;
  text-align: center;
}
section {
  display: flex;
}
input {
  width: 160px;
  position: relative;
}
footer {
  display: flex;
  justify-content: space-between;
}
footer button {
  padding: 7px 25px;
  border-radius: 0.10rem;
}
footer button:nth-last-child(1) {
  margin-left: 20px;
}
.calendar-icon {
  position: absolute;
  width: 24px;
  top: 0.5rem;
  right: 0.5rem;
  height: 24px;
}
.pad {
  width: 50px;
  padding: 0 7px;
  position: relative;
  box-sizing: border-box;
}
.line {
  width: 60%;
  height: 1px;
  background: #000;
  position: absolute;
  left: 20%;
  top: 50px;
  box-sizing: border-box;
}
.form-control::placeholder {
  color: gray;
  font-style: italic;
}
.form-control[readonly] {
  background-color: #fff;
}