A Component for Date Range Picker With Vue And Moment.js

Time range picker is a component of Vue for choosing a date and time range in the calendar. Built alongside Vue2. The date picker uses moments for translation.

date range picker bootstrap, single calendar date range picker, date range picker jquery, date range picker npm, date range picker html, date range picker flutter

How to make use of it:

Install and download:

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

1. Import and register the time 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 model and specify 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. The props available for the data picker 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. Props available for orthodontic dialogue.

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);
  }
};

Date Range Picker Component With Vue Plugin/Github, date range picker material ui