Datetime & Date Range Picker For Vue 3

Description:

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: 'dp' },
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 },
modelValue: { type: [String, Date, Array] as PropType<string | Date>, default: null },
position: { type: String as PropType<OpenPosition>, default: OpenPosition.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 },
hoursGridIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
minutesGridIncrement: { 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<ITimeRange>, default: () => ({}) },
maxTime: { type: Object as PropType<ITimeRange>, default: () => ({}) },
weekStart: { type: [String, Number] as PropType<string | number>, default: 1 },
disabled: { type: Boolean as PropType<boolean>, default: false },
readonly: { type: Boolean as PropType<boolean>, default: false },
weekNumName: { type: String as PropType<string>, default: 'W' },
format: {
  type: [Object, Function] as PropType<FormatOptions | ((date: Date | Date[]) => string)>,
  default: () => ({}),
},
previewFormat: {
  type: [Object, Function] as PropType<FormatOptions | ((date: Date | Date[]) => string)>,
  default: () => ({}),
},
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: () => [1970, 2100] },
disabledDates: { type: Array as PropType<Date[] | string[]>, default: () => [] },
inline: { 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 },

Preview:

Datetime & Date Range Picker For Vue 3

Changelog:

v2.2.0 (10/20/2021)

  • Some classes are changed for the calendar since the table tag is replaced with div, so if you modified something, make sure to adjust it
  • calendarClassName is now passed directly to the calendar wrapper and not the top-most parent
  • twoCalendars – Show two calendars for range picker
  • twoCalendarsSolo – Show two calendars, but both will behave independently of each other
  • hideOffsetDates – Hide days from the previous/next month in the calendar
  • autoRange – Predefine range
  • noToday – Disable today mark in the calendar
  • noHoursOverlay – Disable overlay for hours in the time picker
  • noMinutesOverlay – Disable overlay for minutes in the time picker
  • New slots added hours, minutes, hours-overlay, minutes-overlay, month, year, month-overlay, year-overlay
  • textInputOptions extended with 2 more properties, tabSubmit and openMenuOnFocus
  • Bug Fixes

v2.1.8 (10/08/2021)

  • External update of modelValue not updating the input value

v2.1.7 (10/05/2021)

  • Bug Fix: Menu positioning on fixed positioned paren

v2.1.6 (10/04/2021)

  • Bug Fixes

v2.1.5 (10/02/2021)

  • Some css properties are extracted as scss variables for easier configuration
  • scss variable $dp_cell_border_radius is changed to $dp__cell_border_radius to follow the pattern
  • state prop will set the border color as default and not on hover
  • bugfix

v2.1.3 (09/29/2021)

  • Bug Fixes

v2.1.2 (09/27/2021)

  • Bug Fixes

v2.1.1 (09/26/2021)

  • Bug Fixes

v2.1.0 (09/25/2021)

  • inputmask removed
  • text-input-options are changed
  • monthYearComponent: Use a custom component in the header for month/year pick
  • timePickerComponent: Use a custom component for the time picker
  • actionRowComponent: Use a custom component for the action row
  • Bug Fixes

v2.0.0 (09/07/2021)

  • textInput: Allows date selection via text input
  • textInputOptions: Configure textInput prop
  • monthNameFormat: Change month names to short or long format
  • teleport: Configure teleport target
  • startDate: Set starting position of the calendar, month and year
  • startTime: Set default time in time picker
  • New emit events added ‘textSubmit’, ‘closed’, ‘cleared’
  • New slots added ‘clock-icon’, ‘arrow-left’, ‘arrow-right’, ‘arrow-up’, ‘arrow-down’, ‘calendar-icon’, ‘day’, ‘action-select’, ‘action-preview’
  • Bug Fixes

v1.1.1 (09/07/2021)

  • Bug Fixes

v1.1.0 (09/05/2021)

  • monthPicker (Select only month and year)
  • timePicker (Select only time)
  • closeOnAutoApply (Whether to close the menu when value is selected)
  • Bug Fixes

Download Details:

Author: Vuepic

Live Demo: https://jsfiddle.net/6gn3he1b/

Download Link: https://github.com/Vuepic/vue3-date-time-picker/archive/refs/heads/master.zip

Official Website: https://github.com/Vuepic/vue3-date-time-picker

Install & Download:

# Yarn
$ yarn add vue3-date-time-picker

# NPM
$ npm i vue3-date-time-picker --save

You Might Be Interested In:

Add Comment