Date Range Picker Component With Vue And Moment.js

A customizable date & time range picker component with predefined ranges like This Month and Last Year.

It uses moment.js library for translations.

How to use it:

1. Import and register the date range picker component.

import DatePicker, { CalendarDialog } from 'vue-time-date-range-picker/dist/vdprDatePicker';

export default {
  components: {
    DatePicker,
    CalendarDIalog
  }
}

2. Add the component to the template and define the initial date range.

<date-picker :dateInput="dateInput" :initialDates="dates1" />

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      dateInput: {
        placeholder: "Select Date"
      },
      dates1: [new Date("2020 08 01 00:00"), new Date("2020 08 03 23:59")]
    };
  }
};

3. Available props for the Datepicker component.

initialDates: {
  type: Array,
  validator: PropsValidator.isValidInitialDate,
  default() {
    return [];
  },
},
inline: {
  type: Boolean,
  default: false,
},
language: {
  type: String,
  default: 'en',
},
format: {
  type: String,
  default: 'DD/MM/YYYY HH:mm',
},
sameDateFormat: {
  type: Object,
  validator: PropsValidator.isValidSameDateFormat,
  default() {
    return {
      from: 'DD/MM/YYYY, HH:mm',
      to: 'HH:mm',
    };
  },
},
dateInput: {
  type: Object,
  default() {
    return {};
  },
},
disabledDates: Object,
showHelperButtons: Boolean,
helperButtons: Array,
calendarDateInput: Object,
calendarTimeInput: Object,
switchButtonLabel: String,
switchButtonInitial: Boolean,
applyButtonLabel: String,
isMondayFirst: Boolean,

4. Available props for the CalendarDialog.

inline: {
  type: Boolean,
  default: false,
},
initialDates: {
  type: Array,
  validator: PropsValidator.isValidInitialDate,
  default() {
    return [];
  },
},
language: {
  type: String,
  default: 'en',
},
disabledDates: {
  type: Object,
  validator: PropsValidator.isValidDisabledDates,
  default() {
    return {};
  },
},
showHelperButtons: {
  type: Boolean,
  default: true,
},
helperButtons: {
  type: Array,
  validator: PropsValidator.isValidHelperButtons,
  default() {
    return [];
  },
},
timeInput: {
  type: Object,
  default() {
    return {
      inputClass: null,
      readonly: false,
      step: 60, // in minutes
    };
  },
},
dateInput: {
  type: Object,
  default() {
    return {
      labelStarts: 'Starts',
      labelEnds: 'Ends',
      inputClass: null,
      format: 'DD/MM/YYYY',
      readonly: false,
    };
  },
},
switchButtonLabel: {
  type: String,
  default: 'All Days',
},
switchButtonInitial: {
  type: Boolean,
  default: false,
},
applyButtonLabel: {
  type: String,
  default: 'Apply',
},
isMondayFirst: {
  type: Boolean,
  default: false,
},

5. Event handlers.

<date-picker
  :showHelperButtons="showHelperButtons"
  :dateInput="dateInput"
  :disabledDates="disabledDates"
  @date-applied="dateApplied"
  @on-prev-calendar="onPrevCalendar"
  @on-next-calendar="onNextCalendar"
  @datepicker-opened="datepickerOpened"
  @datepicker-closed="datepickerClosed"
  @select-date="selectDate"
  @select-disabled-date="selectDisabledDate"
/>

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      dateInput: {
        placeholder: "Select Date"
      },
      showHelperButtons: true,
      events: [],
      disabledDates: {
        to: new Date(new Date().setDate(1))
      }
    };
  },
  methods: {
    dateApplied(date1, date2) {
      this.events.push(
        new Event("date-applied", `${date1.toString()} - ${date2.toString()}`)
      );
    },
    onPrevCalendar() {
      this.events.push(new Event("on-prev-calendar", ""));
    },
    onNextCalendar() {
      this.events.push(new Event("on-next-calendar", ""));
    },
    datepickerOpened() {
      this.events.push(new Event("datepicker-opened", ""));
    },
    datepickerClosed() {
      this.events.push(new Event("datepicker-closed", ""));
    },
    selectDate(date1, date2) {
      this.events.push(
        new Event("select-date", `${date1.toString()} - ${date2.toString()}`)
      );
    },
    selectDisabledDate(date) {
      this.events.push(new Event("select-disabled-date", date.toString()));
    },
    clearEvents() {
      const date = new Date();
      this.events = this.events.filter(
        event => date.getTime() < event.time.getTime() + 5000
      );
    }
  },
  mounted() {
    setInterval(this.clearEvents, 1000);
  }
};

Preview:

Changelog:

v2.1.1 (05/16/2022)

• Update

v2.1.0 (04/30/2022)

• add emit on reset event to date picker component

v2.0.1 (03/27/2022)

• Update to Vue3

v1.5.1 (02/27/2022)

• Minimize Vulnerabilities
• Fix Unit Tests
• Fix Linting Issues

v1.5.0 (09/19/2021)

• fix disabled & available dates restriction ‘from’ & ‘to’ to support intersecting value

v1.4.0 (06/21/2021)

• Add feature reset button

Download Details:

Author: limbara

Live Demo: https://codesandbox.io/s/example-vue-time-date-range-picker-byw7g

Download Link: https://github.com/limbara/vue-time-date-range-picker/archive/refs/heads/master.zip

Official Website: https://github.com/limbara/vue-time-date-range-picker

Install & Download:

# NPM
$ npm i vue-time-date-range-picker --save