A Vue. 3 component for creating date picker, time picker, and date range picker in your app.
Features:
- Dark & Light themes.
- SSR support.
- Multiple languages.
- Week numbers.
- Highly customizable.
How to use it:
1. Import and register the component.
import Datepicker from 'vue3-date-time-picker'; import 'vue3-date-time-picker/dist/main.css'
// globally import { createApp } from "vue"; import App from './App.vue'; const app = createApp(App); app.component('Datepicker', Datepicker); app.mount('#app');
// locally <template> <Datepicker v-model="date"></Datepicker> </template> <script> import Datepicker from 'vue3-date-time-picker'; import 'vue3-date-time-picker/dist/main.css' export default { components: { Datepicker }, data() { return { date: null, }; } } </script>
// With Composition API <template> <Datepicker v-model="date"></Datepicker> </template> <script> import { ref } from 'vue'; import Datepicker from 'vue3-date-time-picker'; import 'vue3-date-time-picker/dist/main.css' export default { components: { Datepicker }, setup() { const date = ref(); return { date } } }; </script>
2. Default props.
export const ControlProps = { disabled: { type: Boolean as PropType<boolean>, default: false }, readonly: { type: Boolean as PropType<boolean>, default: false }, autoApply: { type: Boolean as PropType<boolean>, default: false }, inline: { type: Boolean as PropType<boolean>, default: false }, textInput: { type: Boolean as PropType<boolean>, default: false }, }; export const SharedProps = { range: { type: Boolean as PropType<boolean>, default: false }, uid: { type: String as PropType<string>, default: null }, }; export const TimeInputProps = { enableSeconds: { type: Boolean as PropType<boolean>, default: false }, is24: { type: Boolean as PropType<boolean>, default: true }, noHoursOverlay: { type: Boolean as PropType<boolean>, default: false }, noMinutesOverlay: { type: Boolean as PropType<boolean>, default: false }, noSecondsOverlay: { type: Boolean as PropType<boolean>, default: false }, hoursGridIncrement: { type: [String, Number] as PropType<string | number>, default: 1 }, minutesGridIncrement: { type: [String, Number] as PropType<string | number>, default: 5 }, secondsGridIncrement: { type: [String, Number] as PropType<string | number>, default: 5 }, hoursIncrement: { type: [Number, String] as PropType<number | string>, default: 1 }, minutesIncrement: { type: [Number, String] as PropType<number | string>, default: 1 }, secondsIncrement: { type: [Number, String] as PropType<number | string>, default: 1 }, }; export const TimePickerProps = { ...TimeInputProps, fixedStart: { type: Boolean as PropType<boolean>, default: false }, fixedEnd: { type: Boolean as PropType<boolean>, default: false }, timePicker: { type: Boolean as PropType<boolean>, default: false }, }; export const InputProps = { name: { type: String as PropType<string>, default: null }, placeholder: { type: String as PropType<string>, default: '' }, hideInputIcon: { type: Boolean as PropType<boolean>, default: false }, clearable: { type: Boolean as PropType<boolean>, default: true }, state: { type: Boolean as PropType<boolean>, default: null }, required: { type: Boolean as PropType<boolean>, default: false }, autocomplete: { type: String as PropType<string>, default: 'off' }, inputClassName: { type: String as PropType<string>, default: null }, inlineWithInput: { type: Boolean as PropType<boolean>, default: false }, textInputOptions: { type: Object as PropType<ITextInputOptions>, default: () => null }, }; export const TimeValidationProps = { minTime: { type: Object as PropType<ITimeValue>, default: null }, maxTime: { type: Object as PropType<ITimeValue>, default: null }, }; export const DateValidationProps = { minDate: { type: [Date, String] as PropType<Date | string>, default: null }, maxDate: { type: [Date, String] as PropType<Date | string>, default: null }, }; export const ActionRowProps = { selectText: { type: String as PropType<string>, default: 'Select' }, cancelText: { type: String as PropType<string>, default: 'Cancel' }, previewFormat: { type: [String, Function] as PropType<IFormat>, default: () => '', }, multiDates: { type: Boolean as PropType<boolean>, default: false }, partialRange: { type: Boolean as PropType<boolean>, default: true }, ignoreTimeValidation: { type: Boolean as PropType<boolean>, default: false }, ...TimeValidationProps, }; export const MenuNestedDownProps = { monthPicker: { type: Boolean as PropType<boolean>, default: false }, customProps: { type: Object as PropType<Record<string, unknown>>, default: null }, yearPicker: { type: Boolean as PropType<boolean>, default: false }, modelAuto: { type: Boolean as PropType<boolean>, default: false }, }; export const CalendarProps = { locale: { type: String as PropType<string>, default: 'en-Us' }, weekNumName: { type: String as PropType<string>, default: 'W' }, weekStart: { type: [Number, String] as PropType<WeekStartNum | WeekStartStr>, default: 1 }, weekNumbers: { type: Boolean as PropType<boolean>, default: false }, calendarClassName: { type: String as PropType<string>, default: null }, noSwipe: { type: Boolean as PropType<boolean>, default: false }, monthChangeOnScroll: { type: [Boolean, String] as PropType<boolean | 'inverse'>, default: true }, dayNames: { type: [Function, Array] as PropType<((lang: string, weekStart: number) => string[]) | string[]>, default: null, }, }; export const MenuProps = { ...TimePickerProps, ...ActionRowProps, ...MenuNestedDownProps, ...DateValidationProps, ...CalendarProps, ...SharedProps, vertical: { type: Boolean as PropType<boolean>, default: false }, disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false }, menuClassName: { type: String as PropType<string>, default: null }, yearRange: { type: Array as PropType<number[]>, default: () => [1900, 2100] }, multiCalendarsSolo: { type: Boolean as PropType<boolean>, default: false }, calendarCellClassName: { type: String as PropType<string>, default: null }, enableTimePicker: { type: Boolean as PropType<boolean>, default: true }, autoApply: { type: Boolean as PropType<boolean>, default: false }, disabledDates: { type: [Array, Function] as PropType<Date[] | string[] | IDisableDates>, default: () => [] }, monthNameFormat: { type: String as PropType<'long' | 'short'>, default: 'short' }, startDate: { type: [Date, String] as PropType<string | Date>, default: null }, startTime: { type: [Object, Array] as PropType<ITimeValue | ITimeValue[] | null>, default: null }, monthYearComponent: { type: Object as PropType<DefineComponent>, default: null }, timePickerComponent: { type: Object as PropType<DefineComponent>, default: null }, actionRowComponent: { type: Object as PropType<DefineComponent>, default: null }, hideOffsetDates: { type: Boolean as PropType<boolean>, default: false }, autoRange: { type: [Number, String] as PropType<number | string>, default: null }, noToday: { type: Boolean as PropType<boolean>, default: false }, disabledWeekDays: { type: Array as PropType<string[] | number[]>, default: () => [] }, allowedDates: { type: Array as PropType<string[] | Date[]>, default: () => [] }, showNowButton: { type: Boolean as PropType<boolean>, default: false }, nowButtonLabel: { type: String as PropType<string>, default: 'Now' }, markers: { type: Array as PropType<IMarker[]>, default: () => [] }, modeHeight: { type: [Number, String] as PropType<number | string>, default: 255 }, escClose: { type: Boolean as PropType<boolean>, default: true }, spaceConfirm: { type: Boolean as PropType<boolean>, default: true }, monthChangeOnArrows: { type: Boolean as PropType<boolean>, default: true }, presetRanges: { type: Array as PropType<PresetRange[]>, default: () => [] }, flow: { type: Array as PropType<Flow>, default: () => [] }, preventMinMaxNavigation: { type: Boolean as PropType<boolean>, default: false }, minRange: { type: [Number, String] as PropType<number | string>, default: null }, maxRange: { type: [Number, String] as PropType<number | string>, default: null }, multiDatesLimit: { type: [Number, String] as PropType<number | string>, default: null }, reverseYears: { type: Boolean as PropType<boolean>, default: false }, keepActionRow: { type: Boolean as PropType<boolean>, default: false }, weekPicker: { type: Boolean as PropType<boolean>, default: false }, filters: { type: Object as PropType<IDateFilter>, default: () => ({}) }, arrowNavigation: { type: Boolean as PropType<boolean>, default: false }, multiStatic: { type: Boolean as PropType<boolean>, default: true }, disableTimeRangeValidation: { type: Boolean as PropType<boolean>, default: false }, highlight: { type: [Array, Function] as PropType<Date[] | string[] | number[] | ((date: Date) => boolean)>, default: null, }, highlightWeekDays: { type: Array as PropType<number[]>, default: null, }, }; // Since many props are passed from the main component to the children, this is simply to reuse prop definitions and don't repeat the same code export const AllProps = { ...InputProps, ...ControlProps, ...MenuProps, multiCalendars: { type: [Boolean, Number, String] as PropType<boolean | number | string>, default: null }, modelValue: { type: [String, Date, Array, Object, Number] as PropType<ModelValue>, default: null }, modelType: { type: String as PropType<ModelType>, default: null }, position: { type: String as PropType<OpenPosition>, default: 'center' }, dark: { type: Boolean as PropType<boolean>, default: false }, format: { type: [String, Function] as PropType<IFormat>, default: () => null, }, closeOnScroll: { type: Boolean as PropType<boolean>, default: false }, autoPosition: { type: Boolean as PropType<boolean>, default: true }, closeOnAutoApply: { type: Boolean as PropType<boolean>, default: true }, altPosition: { type: [Boolean, Function] as PropType<AltPosition>, default: false }, transitions: { type: [Boolean, Object] as PropType<boolean | ITransition>, default: true }, formatLocale: { type: Object as PropType<Locale>, default: null }, utc: { type: [Boolean, String] as PropType<boolean | 'preserve'>, default: false }, ariaLabels: { type: Object as PropType<Partial<AreaLabels>>, default: () => ({}) }, offset: { type: [Number, String] as PropType<number | string>, default: 10 }, }; // These props bellow are for internal, since prop types may differ when sanitized than the exposed ones export const NestedInternalSharedProps = { range: { type: Boolean as PropType<boolean>, default: false }, multiCalendars: { type: Number as PropType<number>, default: 0 }, internalModelValue: { type: [Date, Array] as PropType<InternalModuleValue>, default: null }, }; // Shared props between MonthYearPicker and Calendar components export const MonthCalendarSharedProps = { ...MenuNestedDownProps, ...NestedInternalSharedProps, vertical: { type: Boolean as PropType<boolean>, default: false }, month: { type: Number as PropType<number>, default: 0 }, year: { type: Number as PropType<number>, default: 0 }, instance: { type: Number as PropType<number>, default: 1 }, };
Preview:
Changelog:
v4.2.3 (03/25/2023)
- Bugfixes
v4.2.2 (03/19/2023)
- Bugfixes
v4.2.1 (03/15/2023)
- Bugfixes
v4.2.0 (03/04/2023)
- New event time-picker-open
- Bug Fixes
v4.1.0 (03/01/2023)
- Expose handleMonthYearChange function to [left/right]-sidebar slots
- teleport prop is returned and can be used instead of DOM-ordered placement for behavior prior to v4
- partial-flow: auto-select value with auto-apply and not wait for the last step to be executed
- Bug Fixes
- Redundant background from the action-row is removed
v4.0.1 (02/17/2023)
- Bugfixes
v4.0.0 (02/16/2023)
- Datepicker will use regular DOM order to place the menu instead of the teleport
- teleport prop is removed
- alt-position boolean prop is removed
- Custom components props are removed
- week-numbers prop is extended to support custom function and local mode, boolean value is removed
- Bug Fixes
- tooltip-[open/close] event will send full marker object
v3.6.8 (02/08/2023)
- New events added [open/close]-tooltip and invalid-fixed-range
- model-type will now work with month-picker and time-picker
- Allow partial parsing on range text-input
- Overlay button will not overlap content in overlays
- Bug Fixes
v3.6.7 (02/01/2023)
- Revert date-fns-tz update
v3.6.6 (02/01/2023)
- Bugfixes
- Mark times outside min and max time disabled
v3.6.5 (01/15/2023)
- New method to programmatically set month and year view
- Bug Fixes
- Expose disabled state to action-row slot
- Respect flow on auto-apply
- Added support for prevent-min-max-navigation in month-picker mode
v3.6.4 (01/02/2023)
- Make disabled-dates work with month-picker
- Bug Fixes
v3.6.3 (12/11/2022)
- Reverted type declarations into index.d.ts because the JetBrains IDEs do not recognize the auto-generated ones.
v3.6.2 (12/11/2022)
- New slots added [month/year]-overlay and [month/year]-overlay-header (#211)
v3.6.1 (12/06/2022)
- bugfixes
v3.6.0 (12/01/2022)
- timezone – Support for timezones
- no-disabled-range – Prevent range selection if the range includes disabled dates
- textInputOptions.format to display the given format on input focus and global format for value display
- on-click-outside – Custom on click outside handler with exposed validation function
- six-weeks – Always display six weeks in the calendar
- New slots – month-year, time-picker, action-row
- Bug Fixes
v3.5.3 (11/01/2022)
- hideNavigation – Allows hiding navigation buttons from month/year/time overlays
- Bugfixes
v3.5.2 (10/09/2022)
- Fixed wrong positioning
v3.5.1 (10/08/2022)
- Bug Fixes
v3.5.0 (10/01/2022)
- dayClass – Pass custom classes to the specific calendar days
- Extended presetRanges to pass a custom slot
- highlightDisabledDays – Keep disabled dates highlighted if enabled
- Extended markers to accept html string
- New slots added left-sidebar and right-sidebar
- updateInternalModelValue – New method to update internal model-value while the picker is in open state
- Bug Fixes
v3.4.8 (09/11/2022)
- Bug Fixes
- Mark navigation buttons as disabled if preventMinMaxNavigation is enabled
- Accessibility – Use the spacebar also to mark selection
v3.4.7 (09/01/2022)
- highlightWeekDays – highlight days based on the day of the week
- ignoreTimeValidation – disables the time check when using minDate or maxDate
v3.4.6 (08/19/2022)
- Fixed issue that fails to load proper build format
- Use .cjs and .js for build formats
- Updated installation step in installation instructions for nuxt
v3.4.5 (08/16/2022)
- Fix malformed scss
v3.4.4 (08/15/2022)
- Bugfixes
v3.4.3 (08/14/2022)
- teleportCenter – Sets the menu on the page center
- Add “type”: “module” to package.json for Vite and SSR build
- Fixed positioning issue on small screens
- Expose class dp__cell_highlight_active when selection is active on highlighted date
v3.4.2 (08/13/2022)
- Added option to specify multiple patterns for parsing date on text-input
- offset – Configure spacing between the menu and input
- Fixed issue with nuxt throwing error in production build
- Refactor Menu to auto open on text input if openMenu is set in textInputOptions to true
- Build size reduced
v3.4.1 (08/07/2022)
- Fixed issue that causes the menu to close when used inside vuetify and quasar modals
- Refactor @invalid-select to emit if the selection is invalid from the action row
- Refactor Add preventDefault on enter key when input is focused
v3.4.0 (08/01/2022)
- Extend yearPicker to support range
- Extend utc to support the same UTC value input/output
- Extend sidebar option for presetDates with style property
- New event added invalid-select
- highlight – Option to highlight dates
- Bug Fixes
- Refactor – maxRange and minRange to ignore disabledDates in count
- Refactor – Timepicker will include minDate and maxDate time into the validation
- Refactor – Disable the select button in incomplete range with partialRange disabled
v3.3.1 (07/06/2022)
- Fixed issue with multiDates emitting only 2 dates
- Fixed issue with browser warnings for non-passive event listener
v3.3.0 (07/02/2022)
- @updateMonthYear event will now emit { instance: number; month: number; year: number } instead of two separate events
- monthYearComponent now needs to emit only the update-month-year event instead of two separate events for month and year
- dayNames – Pass custom labels for weekdays in the calendar header
- modelType – Specify custom type for v-model binding
- modelAuto – Use both singe and range modes
- Bug Fixes
v3.2.2 (06/04/2022)
- disableTimeRangeValidation – Explicitly allow end time in range mode to be before the start time
- Fixed issue with maxDate in monthPicker mode
- Fixed issue with the required input attribute not detected on form submit
- Set calendar (when using multiCalendars) view on the selected range when it is opened
v3.2.1 (05/14/2022)
- Calendar icon in the input field will also trigger a click event
- Text input validation is redone
- Allow multiCalendars view change based on external v-model update by providing :multiStatic=”false”
- Bugfix
v3.2.0 (05/01/2022)
- arrowNavigation – Navigate through the calendar via arrow keys
- flow now supports timePicker and monthPicker modes
- New event added focus-prev to handle shift+tab
- New mode – yearPicker
- Added validation for disabled dates with textInput
- Bug Fixes
v3.1.1 (04/16/2022)
- Fixed transition prop validation
- Corrected misspelled class name db__calendar_header to dp__calendar_header
v3.1.0 (04/10/2022)
- Added swipe events for touch devices, (can be disabled by passing noSwipe prop)
- vertical – New mode added, instead of going left/right, it will be up/down orientation
- New transition added on menu open
- ariaLabels – Option to change aria-labels text
- Bug Fixes
- Code cleanup, removed redundant code, better organization
- Use Symbol for injected props
- teleport to accept HTMLElement
- Improved and smoother transitions
- Positioning is redone, if autoPosition is enabled, it will auto fit to screen, x or y-axis
v3.0.0 (03/20/2022)
- scss import is changed to @vuepic/vue-datepicker/src/VueDatePicker/style/main.scss
- If you used the component in the html <script> tag, component name is changed to just VueDatePicker
- Bug fixes
- Use vite as a build tool
- The playground is moved to StackBlitz
- The component folder is renamed to VueDatePicker
v2.8.0 (03/12/2022)
- Added event updateMonthYear when month or year is changed
- multiDatesLimit – Limit selectable dates in multiDates mode
- range mode is now compatible with month picker
- weekPicker mode added
- keepActionRow – Option to keep action bar when autoApply is set
- reverseYears – Option to reverse years order
- Bug Fixes
v2.7.0 (02/23/2022)
- utc – Support for UTC zone
- Bug Fixes
- Refactor option to use clear-icon slot with the dp-input slot
- onClear event added to the dp-input slot params
- Cleaned up some redundant code
v2.5.0 (01/29/2022)
- twoCalendars renamed to multiCalendars
- twoCalendarsSolo renamed to multiCalendarsSolo
- New CSS variable added for menu border-color
- multiCalendars – allow adding multiple calendars
- inlineWithInput – option to use input field with inline
- Option to add name attribute to the input element
- @recalculatePosition – event added when menu position is recalculated
- Option to add autocomplete attribute to the input element
- Option to pass a custom positioning function to the altPosition
- Bug Fixes
Download Details:
Author: Vuepic
Live Demo: https://stackblitz.com/edit/vuepic-vue-datepicker?file=src%2Fcomponents%2FPlayground.vue
Download Link: https://github.com/Vuepic/vue-datepicker/archive/refs/heads/main.zip
Official Website: https://github.com/Vuepic/vue-datepicker
Install & Download:
# Yarn
$ yarn add @vuepic/vue-datepicker
# NPM
$ npm i @vuepic/vue-datepicker --save