Home
Date & Time
Datetime & Date Range Picker For Vue 3

Datetime & Date Range Picker For Vue 3

Vuepic Last Updated: 30 mins ago

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:

Datetime & Date Range Picker For Vue 3

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

Related Posts

Tags:, ,

Add Comment