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.2 (07/28/2023)
- Update & Bugfix
v2.1.1 (05/16/2023)
- Update
v2.1.0 (04/30/2023)
- add emit on reset event to date picker component
v2.0.1 (03/27/2023)
- 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