@gitlab/ui/dist/components/base/daterange_picker/daterange_picker.js

GitLab UI Components

import GlDatepicker from '../datepicker/datepicker';
import { getDateInPast, getDateInFuture, getDayDifference } from '../../../utils/datetime_utility';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  components: {
    GlDatepicker: GlDatepicker
  },
  props: {
    fromLabel: {
      type: String,
      required: false,
      default: 'From'
    },
    toLabel: {
      type: String,
      required: false,
      default: 'To'
    },
    value: {
      type: Object,
      required: false,
      default: null
    },
    i18n: {
      type: Object,
      required: false,
      default: null
    },
    defaultMinDate: {
      type: Date,
      required: false,
      default: null
    },
    defaultMaxDate: {
      type: Date,
      required: false,
      default: null
    },
    defaultStartDate: {
      type: Date,
      required: false,
      default: null
    },
    defaultEndDate: {
      type: Date,
      required: false,
      default: null
    },
    maxDateRange: {
      type: Number,
      required: false,
      default: 0
    },
    startPickerClass: {
      type: String,
      required: false,
      default: ''
    },
    endPickerClass: {
      type: String,
      required: false,
      default: ''
    },
    theme: {
      type: String,
      required: false,
      default: ''
    }
  },
  data: function data() {
    return {
      fromCalendarMaxDate: this.defaultMaxDate ? getDateInPast(this.defaultMaxDate, 1) : null,
      toCalendarMinDate: this.defaultStartDate ? getDateInFuture(this.defaultStartDate, 1) : null,
      startDate: this.defaultStartDate,
      endDate: this.defaultEndDate,
      openToCalendar: false
    };
  },
  computed: {
    toCalendarMaxDate: function toCalendarMaxDate() {
      if (!this.startDate || !this.maxDateRange) return this.defaultMaxDate;
      var computedMaxEndDate = getDateInFuture(this.startDate, this.maxDateRange);
      return new Date(Math.min(computedMaxEndDate, this.defaultMaxDate));
    },
    dateRangeViolation: function dateRangeViolation() {
      return this.startDate >= this.endDate || this.exceedsDateRange;
    },
    exceedsDateRange: function exceedsDateRange() {
      var numberOfDays = getDayDifference(this.startDate, this.endDate);
      return this.maxDateRange ? numberOfDays > this.maxDateRange : false;
    },
    toCalendarDefaultDate: function toCalendarDefaultDate() {
      return this.endDate || this.toCalendarMinDate;
    },
    numericStartTime: function numericStartTime() {
      return this.startDate ? this.startDate.getTime() : null;
    }
  },
  watch: {
    value: function value(val) {
      var startDate = val.startDate,
          endDate = val.endDate;
      this.startDate = startDate;
      this.endDate = endDate;
    }
  },
  methods: {
    onStartDateSelected: function onStartDateSelected(startDate) {
      this.startDate = startDate;
      this.toCalendarMinDate = startDate ? getDateInFuture(startDate, 1) : null;

      if (this.dateRangeViolation) {
        this.openToCalendar = true;
        this.endDate = null;
      } else this.$emit('input', {
        startDate: startDate,
        endDate: this.endDate
      });
    },
    onEndDateSelected: function onEndDateSelected(endDate) {
      this.openToCalendar = false;
      this.endDate = endDate;
      this.$emit('input', {
        startDate: this.startDate,
        endDate: endDate
      });
    }
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-daterange-picker"},[_c('div',{class:_vm.startPickerClass},[_c('label',[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n},on:{"input":_vm.onStartDateSelected},model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endPickerClass},[_c('label',[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate},on:{"input":_vm.onEndDateSelected},model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1)])};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = __vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export default __vue_component__;