Home
Date & Time
Simple Date & Time Picker Component For Vue 3

Simple Date & Time Picker Component For Vue 3

icehaunter Last Updated: 10 months ago

A Vue.js 3 date & time picker component that makes it easy to select a date from a clean looking calendar interface.

Features:

  • Min/max dates allowed to pick.
  • Month/Year/Day view.
  • Allows you to disable dates.
  • Easy to style using your own CSS.

How to use it:

1. Import and register the component.

import Datepicker from 'vue3-datepicker'
import { ref } from 'vue'
const picked = ref(new Date());

2. Add the date picker component to the template.

<template>
  <datepicker v-model="picked" />
</template>

3. Available component props to customize the date picer.

placeholder: {
  type: String,
  default: '',
},
/**
 * `v-model` for selected date
 */
modelValue: {
  type: Date as PropType<Date>,
  required: false,
},
/**
 * Dates not available for picking
 */
disabledDates: {
  type: Object as PropType<{ dates?: Date[] }>,
  required: false,
},
/**
 * Upper limit for available dates for picking
 */
upperLimit: {
  type: Date,
  required: false,
},
/**
 * Lower limit for available dates for picking
 */
lowerLimit: {
  type: Date,
  required: false,
},
/**
 * View on which the date picker should open. Can be either `year`, `month`, or `day`
 */
startingView: {
  type: String as PropType<'year' | 'month' | 'day'>,
  required: false,
  default: 'day',
  validate: (v: unknown) =>
    typeof v === 'string' && ['day', 'month', 'year'].includes(v),
},
/**
 * `date-fns`-type formatting for a month view heading
 */
monthHeadingFormat: {
  type: String,
  required: false,
  default: 'LLLL yyyy',
},
/**
 * `date-fns`-type formatting for the month picker view
 */
monthListFormat: {
  type: String,
  required: false,
  default: 'LLL',
},
/**
 * `date-fns`-type formatting for a line of weekdays on day view
 */
weekdayFormat: {
  type: String,
  required: false,
  default: 'EE',
},
/**
 * `date-fns`-type format in which the string in the input should be both
 * parsed and displayed
 */
inputFormat: {
  type: String,
  required: false,
  default: 'yyyy-MM-dd',
},
/**
 * [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage).
 * Used in string formatting (see default `monthHeadingFormat`)
 */
locale: {
  type: Object as PropType<Locale>,
  required: false,
},
/**
 * Day on which the week should start.
 *
 * Number from 0 to 6, where 0 is Sunday and 6 is Saturday.
 * Week starts with a Monday (1) by default
 */
weekStartsOn: {
  type: Number,
  required: false,
  default: 1,
  validator: (value: any) => [0, 1, 2, 3, 4, 5, 6].includes(value),
},
/**
 * Disables datepicker and prevents it's opening
 */
disabled: {
  type: Boolean,
  required: false,
  default: false,
},

Preview:

Simple Date Picker Component For Vue 3

Changelog:

v0.3.4 (05/13/2022)

  • Bugfix

v0.3.3 (04/18/2022)

  • Bugfix

v0.3.2 (01/19/2022)

  • Fixed automatic date formatting
  • Fixed timepicker scrolling

v0.3.1 (12/08/2021)

  • Added timepicker

v0.2.5 (07/02/2021)

  • Fixed style variables not being applied properly
  • Added clearable, typeable, disabled

v0.2.4 (02/05/2021)

  • Enabled proper input styling by allowing attribute fallthrough behavior.

Download Details:

Author: icehaunter

Live Demo: https://icehaunter.github.io/vue3-datepicker/examples.html

Download Link: https://github.com/icehaunter/vue3-datepicker/archive/master.zip

Official Website: https://github.com/icehaunter/vue3-datepicker

Install & Download:

# NPM
$ npm i vue3-datepicker

Related Posts

Tags:

Add Comment