A Vue. 3 component for creating time pickers, date pickers, month pickers, year pickers, and date range pickers in your app.
Features:
- Dark & Light themes.
- Accessibility.
- SSR support.
- Multiple languages.
- Timezones.
- 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.
multiCalendars: { type: [Boolean, Number, String, Object] as PropType<MultiCalendarsProp>, default: undefined }, 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, }, autoPosition: { type: Boolean as PropType<boolean>, default: true }, altPosition: { type: Function as PropType<CustomAltPosition>, default: null }, transitions: { type: [Boolean, Object] as PropType<boolean | Partial<Transition>>, 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<AriaLabels>>, default: () => ({}) }, offset: { type: [Number, String] as PropType<number | string>, default: 10 }, hideNavigation: { type: Array as PropType<Flow[]>, default: () => [] }, timezone: { type: String as PropType<string>, default: null }, emitTimezone: { type: String as PropType<string>, default: null }, vertical: { type: Boolean as PropType<boolean>, default: false }, disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false }, disableYearSelect: { type: Boolean as PropType<boolean>, default: false }, menuClassName: { type: String as PropType<string>, default: null }, dayClass: { type: Function as PropType<(date: Date) => string>, default: null }, yearRange: { type: Array as PropType<number[]>, default: () => [1900, 2100] }, 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<TimeModel | TimeModel[] | null>, 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: null }, nowButtonLabel: { type: String as PropType<string>, default: 'Now' }, markers: { type: Array as PropType<IMarker[]>, default: () => [] }, escClose: { type: Boolean as PropType<boolean>, default: true }, spaceConfirm: { type: Boolean as PropType<boolean>, default: true }, monthChangeOnArrows: { type: Boolean as PropType<boolean>, default: true }, presetDates: { type: Array as PropType<PresetDate[]>, default: () => [] }, flow: { type: Array as PropType<Flow[]>, default: () => [] }, partialFlow: { type: Boolean as PropType<boolean>, default: false }, 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 }, weekPicker: { type: Boolean as PropType<boolean>, default: false }, filters: { type: Object as PropType<Partial<DateFilter>>, default: () => ({}) }, arrowNavigation: { type: Boolean as PropType<boolean>, default: false }, disableTimeRangeValidation: { type: Boolean as PropType<boolean>, default: false }, highlight: { type: [Array, Function, Object] as PropType<HighlightProp>, default: null, }, highlightWeekDays: { type: Array as PropType<number[]>, default: null, }, highlightDisabledDays: { type: Boolean as PropType<boolean>, default: false }, teleport: { type: [String, Boolean] as PropType<string | boolean>, default: null }, teleportCenter: { type: Boolean as PropType<boolean>, default: false }, 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: [String, Function] as PropType<'iso' | 'local' | ((date: Date) => string | number)>, default: null, }, calendarClassName: { type: String as PropType<string>, default: null }, monthChangeOnScroll: { type: [Boolean, String] as PropType<boolean | 'inverse'>, default: true }, dayNames: { type: [Function, Array] as PropType<((lang: string, weekStart: number) => string[]) | string[]>, default: null, }, 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 }, 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 }, minDate: { type: [Date, String] as PropType<Date | string>, default: null }, maxDate: { type: [Date, String] as PropType<Date | string>, default: null }, minTime: { type: Object as PropType<TimeModel>, default: null }, maxTime: { type: Object as PropType<TimeModel>, default: null }, 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 | null>, 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 }, fixedStart: { type: Boolean as PropType<boolean>, default: false }, fixedEnd: { type: Boolean as PropType<boolean>, default: false }, timePicker: { type: Boolean as PropType<boolean>, default: false }, 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 }, range: { type: Boolean as PropType<boolean>, default: false }, uid: { type: String as PropType<string>, default: null }, disabled: { type: Boolean as PropType<boolean>, default: false }, readonly: { type: Boolean as PropType<boolean>, default: false }, inline: { type: [Boolean, Object] as PropType<InlineProp>, default: false }, textInput: { type: [Boolean, Object] as PropType<TextInputProp>, default: false }, noDisabledRange: { type: Boolean as PropType<boolean>, default: false }, sixWeeks: { type: [Boolean, String] as PropType<boolean | SixWeekMode>, default: false }, actionRow: { type: Object as PropType<Partial<ActionRowData>>, default: () => ({}) }, focusStartDate: { type: Boolean as PropType<boolean>, default: false }, disabledTimes: { type: [Function, Array] as PropType<DisabledTimeArrProp>, default: undefined }, showLastInRange: { type: Boolean as PropType<boolean>, default: true }, timePickerInline: { type: Boolean as PropType<boolean>, default: false }, calendar: { type: Function as PropType<(month: ICalendarDate[]) => ICalendarDate[]>, default: null }, config: { type: Object as PropType<Partial<Config>>, default: undefined }, quarterPicker: { type: Boolean as PropType<boolean>, default: false }, yearFirst: { type: Boolean as PropType<boolean>, default: false },
Preview:
Changelog:
v7.2.2 (11/07/2023)
- Bugfixes
v7.2.1 (11/04/2023)
- Added id attribute to date cells in the calendar
- Reduced bundle size
- Bugfixed
v7.2.0 (10/15/2023)
- Added invalid-date event
- Added year-first prop
- Additional configuration is now possible for highlight prop
- Added 3 additional CSS variables for range styling
- Fixed the issue causing the overlay grid to overflow when the height changes
- Fixed missing –dp-hover-text-color CSS variable on preset range button
- highlightWeekDays and highlightDisabledDays props are deprecated
- Array type for highlight prop is deprecated
v7.1.0 (10/06/2023)
- New event added date-update
- Bug Fixes
v7.0.0 (09/30/2023)
- Added quarter-picker mode
- Added built-in date validation support for text-input
- Added utc mode support for week-picker
- Added disabled times indications when validating range start/end times
- Added new option selectOnFocus for text-input
- Bug Fixes
v6.1.0 (09/10/2023)
- Added config prop, grouping general configuration
- Bug Fixes
v6.0.3 (09/02/2023)
- Lots of bugs fixed
- Added aria-disabled and aria-invalid attributes on the input field
v6.0.2 (08/26/2023)
- Lots of bugs fixed
v6.0.1 (08/19/2023)
- Extend disabled-times prop config for more accessible range validation
- Bugfixes
v6.0.0 (08/16/2023)
- Added multi-calendars support for month-picker
- New event added: @update:model-timezone-value
- New prop emit-timezone added
- Extended disabled-times prop with array option for dynamic disabling of times
- Full menu transition control added
- Added support for vue/compact
- Added mobile layout for preset-dates
- Support for RTL languages
- Added support for a single date in preset-dates
- Bug Fixes
v5.4.0 (07/01/2023)
- Extend the format-locale prop to have priority over locale prop
- onInput function exposed to dp-input slot, can now accept string value too
- New slot marker added
- Bug Fixes
v5.3.0 (06/17/2023)
- Added time-picker-inline prop to show time-picker under the calendar
- Added auto-apply-month prop to enable/disable auto month/year select in month-picker mode
- Added calendar prop to modify calendar view
- Bug Fixes
v5.2.1 (06/11/2023)
- bugfixes
v5.2.0 (06/03/2023)
- focus-start-date – Always set the view on a given date ignoring v-model value
- New method added switch-view to manually trigger overlay
- disabled-times prop added
- sidebar-[left/right] now have additional props passed
- close-on-clear-value – Option to disable menu close on clear
- New events added range-start and range-end
- Bug Fixes
v5.1.2 (05/19/2023)
- Bug Fixes
v5.1.1 (05/16/2023)
- dp-input slot now has exposed the isMenuOpen prop
- Bugfixes
v5.1.0 (05/13/2023)
- New events: time-picker-close and am-pm-change
- New prop: disable-year-select
- Bug Fixes
v5.0.1 (05/02/2023)
- Set type=”button” on <button> elements
- Fix types exports in TS
v5.0.0 (05/02/2023)
- Now button is moved to the action row
- sass variables and import are removed
- Renames: now-button slot is renamed to action-extra
- Renames: action-select slot is renamed to action-buttons
- prevenDefault is not called on mousedown | pointerdown events anymore in the menu (needs to be set explicitly)
- New prop action-row
- dp-input slot now has exposed all internal input functions
- six-weeks support for multiple options
- Bug Fixes
v4.5.1 (04/24/2023)
- Bugfix
v4.5.0 (04/22/2023)
- Revert auto-generating declarations
- Exported DatepickerInstance type for usage with ref
- Action row redesign
- Bugfix
v4.4.0 (04/16/2023)
- Option to override sass with plain CSS variables
- Added onBlur param to the dp-input slot
- New method parseModel is added for manually trigger reformating or parsing value
- Bug Fixes
- Refactor
v4.3.0 (04/02/2023)
- Added multi-dates support for month-picker
- Bugfixes
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