Datetime & Date Range Picker For Vue 3

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.

uid: { type: String as PropType<string>, default: null },
name: { type: String as PropType<string>, default: null },
is24: { type: Boolean as PropType<boolean>, default: true },
enableTimePicker: { type: Boolean as PropType<boolean>, default: true },
locale: { type: String as PropType<string>, default: 'en-US' },
range: { type: Boolean as PropType<boolean>, default: false },
multiCalendars: { type: [Boolean, Number, String] as PropType<boolean | number | string>, default: null },
multiCalendarsSolo: { type: Boolean as PropType<boolean>, default: false },
modelValue: { type: [String, Date, Array, Object] as PropType<ModelValue>, default: null },
position: { type: String as PropType<OpenPosition>, default: 'center' },
placeholder: { type: String as PropType<string>, default: null },
weekNumbers: { type: Boolean as PropType<boolean>, default: false },
dark: { type: Boolean as PropType<boolean>, default: false },
hoursIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
minutesIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
secondsIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
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 },
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<ITimeValue>, default: null },
maxTime: { type: Object as PropType<ITimeValue>, default: null },
weekStart: { type: [String, Number] as PropType<WeekStartNum | WeekStartStr>, default: 1 },
disabled: { type: Boolean as PropType<boolean>, default: false },
readonly: { type: Boolean as PropType<boolean>, default: false },
required: { type: Boolean as PropType<boolean>, default: false },
monthNameFormat: { type: String as PropType<'long' | 'short'>, default: 'short' },
weekNumName: { type: String as PropType<string>, default: 'W' },
format: {
    type: [String, Function] as PropType<IFormat>,
    default: () => null,
},
previewFormat: {
    type: [String, Function] as PropType<IFormat>,
    default: () => null,
},
inputClassName: { type: String as PropType<string>, default: null },
menuClassName: { type: String as PropType<string>, default: null },
calendarClassName: { type: String as PropType<string>, default: null },
calendarCellClassName: { type: String as PropType<string>, default: null },
hideInputIcon: { type: Boolean as PropType<boolean>, default: false },
state: { type: Boolean as PropType<boolean>, default: null },
clearable: { type: Boolean as PropType<boolean>, default: true },
closeOnScroll: { type: Boolean as PropType<boolean>, default: false },
autoApply: { type: Boolean as PropType<boolean>, default: false },
filters: { type: Object as PropType<IDateFilter>, default: () => ({}) },
disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false },
yearRange: { type: Array as PropType<number[]>, default: () => [1900, 2100] },
disabledDates: { type: [Array, Function] as PropType<Date[] | string[] | IDisableDates>, default: () => [] },
disabledWeekDays: { type: Array as PropType<string[] | number[]>, default: () => [] },
inline: { type: Boolean as PropType<boolean>, default: false },
inlineWithInput: { type: Boolean as PropType<boolean>, default: false },
selectText: { type: String as PropType<string>, default: 'Select' },
cancelText: { type: String as PropType<string>, default: 'Cancel' },
autoPosition: { type: Boolean as PropType<boolean>, default: true },
monthPicker: { type: Boolean as PropType<boolean>, default: false },
timePicker: { type: Boolean as PropType<boolean>, default: false },
closeOnAutoApply: { type: Boolean as PropType<boolean>, default: true },
textInput: { type: Boolean as PropType<boolean>, default: false },
textInputOptions: { type: Object as PropType<ITextInputOptions>, default: () => ({}) },
teleport: { type: String as PropType<string>, default: 'body' },
startDate: { type: [Date, String] as PropType<string | Date>, default: null },
startTime: { type: [Object, Array] as PropType<ITimeValue | ITimeValue[]>, 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 },
customProps: { type: Object as PropType<Record<string, unknown>>, 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 },
noHoursOverlay: { type: Boolean as PropType<boolean>, default: false },
noMinutesOverlay: { type: Boolean as PropType<boolean>, default: false },
noSecondsOverlay: { type: Boolean as PropType<boolean>, default: false },
altPosition: { type: [Boolean, Function] as PropType<AltPosition>, default: false },
allowedDates: { type: Array as PropType<string[] | Date[]>, default: () => [] },
showNowButton: { type: Boolean as PropType<boolean>, default: false },
nowButtonLabel: { type: String as PropType<string>, default: 'Now' },
partialRange: { type: Boolean as PropType<boolean>, default: true },
monthChangeOnScroll: { type: [Boolean, String] as PropType<boolean | 'inverse'>, default: true },
markers: { type: Array as PropType<IMarker[]>, default: () => [] },
transitions: { type: Boolean as PropType<boolean | ITransition>, default: true },
modeHeight: { type: [Number, String] as PropType<number | string>, default: 255 },
enableSeconds: { type: Boolean as PropType<boolean>, default: false },
openMenuOnFocus: { type: Boolean as PropType<boolean>, default: true },
escClose: { type: Boolean as PropType<boolean>, default: true },
spaceConfirm: { type: Boolean as PropType<boolean>, default: true },
monthChangeOnArrows: { type: Boolean as PropType<boolean>, default: true },
formatLocale: { type: Object as PropType<Locale>, default: null },
autocomplete: { type: String as PropType<string>, default: null },

Preview:

Datetime & Date Range Picker For Vue 3

Changelog:

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

Add Comment