DateRange.vue

<template>
  <daterange-component
    placeholder="Date Range"
    :format="format"
    i18n="EN"
    :captions="{title: 'Choose Date Range For Filters', 
	ok_button: 'Apply'}"
    @selected="selected"
    class="input"
    @events="events"
  ></daterange-component>
</template>
<script>
import moment from "moment-timezone";
export default {
  name: "DateRangeComponent",
  props: {
    format: {
      default: "DD MMM YYYY"
    },
    outputFormat: {
      default: "MM/DD/YYYY"
    },
    outputTimezone: {
      default: "UTC"
    }
  },
  methods: {
    events(e) {
      this.$emit("events", e);
    },
    selected(e) {
      let startDate = moment(e.start)
        .tz(this.outputTimezone)
        .format(this.outputFormat);
      let endDate = moment(e.end)
        .tz(this.outputTimezone)
        .format(this.outputFormat);
      this.$emit("selected", {
        start: startDate,
        end: endDate
      });
    }
  }
};
</script>