vue-datepicker

About

A responsive date picker for Vue.js, made with love, with nice transition and clean design.

Install

1. Install component with npm

npm install @mathieustan/vue-datepicker --save

2. Load component in your project

import VueDatePicker from '@mathieustan/vue-datepicker';
import '@mathieustan/vue-datepicker/dist/vue-datepicker.min.css';

Vue.use(VueDatePicker);

// Options: You can set lang by default
Vue.use(VueDatePicker, {
  lang: 'fr'
});

import { VueDatePicker } from '@mathieustan/vue-datepicker';
import '@mathieustan/vue-datepicker/dist/vue-datepicker.min.css';

export default  {
  components : {
    VueDatePicker,
  },
};

3. Use the component

<template>
  ...
  <VueDatePicker v-model="date" />
  ...
</template>

Api

name	description	type	default
allowed-dates	Restricts which dates can be selected	`function`	null
allow-overflow	Allows the menu to overflow off the screen	`boolean`	true
attach	Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. will attach to the root body by default.	`any`	false
button-cancel	Sets cancel text button	`string`	undefined
button-validate	Sets validate text button	`string`	undefined
clearable	Allows to clear date	`boolean`	false
color	Allows you to customize color	`string`	'#4f88ff'
content-class	Applies a custom class to the detached element. This is useful because the content is moved to the beginning of body (unless the attach prop is provided) and is not targetable by classes passed directly on the component.	`string`	undefined
disabled	Sets datepicker disabled	`boolean`	false
format	Allows you to customize input date format	`string`	undefined
format-header	Allows you to customize header date format	`string`	undefined
fullscreen-mobile	Shows datepicker in a bottom sheet when in mobile view	`boolean`	false
id	Sets the input id	`string`	undefined
inline	Shows an inline datepicker	`boolean`	false
locale	Allows to change language	`object`	{}
max-date	Dates are disabled after this date	`[ "string", "number", "date" ]`	undefined
min-date	Dates are availables after this date	`[ "string", "number", "date" ]`	undefined
mobile-breakpoint	Used to set when to toggle between normal datepicker & fullscreen datepicker. Used with fullscreenMobile prop	`[ "number", "string" ]`	576
name	Sets input name property & datepicker title in fullscreenMobile	`string`	'datepicker'
no-calendar-icon	Hides datepicker icon	`boolean`	false
no-header	Hides datepicker header	`boolean`	false
origin	Allows to set origin	`string`	undefined
placeholder	Sets the input’s placeholder text	`string`	'YYYY-MM-DD'
range	Sets range mode active (currently, only available for date)	`boolean`	false
range-header-text	Sets header text format	`string`	undefined
range-input-text	Sets input text format	`string`	'%d ~ %d'
range-presets	Allows to add custom range presets to range datepicker. (Max custom presets = 6) Example: [{ name: 'This year', dates: { start: ..., end: ... } }]	`array`	undefined
rtl	Sets RTL direction	`boolean`	false
tabindex	Sets input tabindex	`[ "string", "number" ]`	0
type	Determines the type of the picker - date/month/quarter	`string`	'date'
validate	Shows validation buttons to select date	`boolean`	false
value	Date picker model (ISO 8601 format, YY-mm-dd or YY-mm)	`[ "string", "object", "number", "date" ]`	undefined
visible	Allows you to trigger datepicker visibility	`boolean`	false
visible-years-number	Sets years range in year selection panel (it'll see X years before and after current year)	`number`	10
z-index	Sets datepicker index	`number`	1002

Examples (props)

# Default

Default usage without any props

<template>
  <VueDatePicker v-model="date" />
</template>

# Props: AllowedDates

Function which validate allowed date

<template>
  <div class="pa-0">
    <div>
      <div>
        <p> Day Example :</p>
        <VueDatePicker
          v-model="date"
          :allowed-dates="allowedDates"
        />
      </div>
    </div>

    <div>
      <div>
        <p> Month Example :</p>
        <VueDatePicker
          v-model="date"
          :allowed-dates="allowedMonths"
          type="month"
        />
      </div>
    </div>

    <div>
      <div>
        <p> Quarter Example :</p>
        <VueDatePicker
          v-model="date"
          :allowed-dates="allowedQuarters"
          type="quarter"
        />
      </div>
    </div>

    <div>
      <div>
        <p> Year Example :</p>
        <VueDatePicker
          v-model="date"
          :allowed-dates="allowedYears"
          type="year"
        />
      </div>
    </div>
  </div>

</template>

Day Example :

Month Example :

Quarter Example :

Year Example :

# Props: Validate

Need to validate to change date (Add buttons)

<template>
  <VueDatePicker
    v-model="date"
    button-validate="Ok"
    button-cancel="Cancel"
    validate
  />
</template>

# Props: Clearable

Adds input clear functionality

<template>
  <VueDatePicker v-model="date" clearable />
</template>

# Props: Format

Allow to format input date

<template>
  <VueDatePicker
    v-model="date"
    format="YYYY-MM-DD"
  />
</template>

# Props: FormatHeader

Allow to format header date

<template>
  <VueDatePicker
    v-model="date"
    format-header="dddd, DD MMMM"
  />
</template>

# Props: Placeholder

Allow to set placeholder for input

<template>
  <VueDatePicker
    v-model="date"
    placeholder="Choose date"
  />
</template>

# Props: Visible

Used to trigger datepicker visibility

<template>
  <div class="d-flex flex-column align-start">
    <div class="d-flex align-center p-b-16">
      Toggle Visibility
      <input
        type="checkbox"
        id="isVisible"
        name="isVisible"
        v-model="isVisible"
      >
    </div>

    <VueDatePicker
      v-model="date"
      :visible="isVisible"
      @onClose="isVisible = false"
    />
  </div>
</template>

Toggle Visibility

# Props: Disabled

Set datepicker disabled

<template>
  <VueDatePicker v-model="date" disabled />
</template>

# Props: Color

Allow to set datepicker color

<template>
  <div class="d-flex flex-column align-start">
    <div class="d-flex align-center p-b-16">
      <label for="lang-select" class="p-r-16"> Choose a color: </label>
      <select id="lang-select" v-model="color">
        <option
          v-for="(color, index) in colorList"
          :key="index"
          :value="color.hex">
          {{ color.name }}
        </option>
      </select>
    </div>

    <VueDatePicker
      v-model="date"
      :color="color"
    />
  </div>
</template>

Choose a color:

# Props: NoHeader

Boolean to hide datepicker header

<template>
  <VueDatePicker v-model="date" no-header />
</template>

# Props: NoCalendarIcon

Hide to hide calendar icon

<template>
  <VueDatePicker v-model="date" no-calendar-icon />
</template>

# Props: FullscreenMobile

Datepicker will appear in a bottom sheet when screen width is less than 480px

<template>
  <VueDatePicker
    v-model="date"
    fullscreen-mobile
  />
</template>

# Props: MinDate & MaxDate

Specify min & max date for datepicker

<template>
  <VueDatePicker
    v-model="date"
    :min-date="minDate"
    :max-date="maxDate"
  />
</template>

# Props: visibleYearsNumber

Allows to set years range in year picker (it will add X years before & after current year)

<template>
  <VueDatePicker
    v-model="date"
    :visible-years-number="50"
  />
</template>

# Props: Locale

Allows to set lang & custom WeekDays ({ lang: 'fr', weekDays: ['L', 'M', 'M', 'J', 'V', 'S', 'D'] })

<template>
  <VueDatePicker
    v-model="date"
    :locale="locale"
  />
</template>

# Props: Locale (Selectable lang)

Translations. Important, you should always pass a property lang in locale property. :locale="{ lang: selectedLang }"

<template>
  <div class="d-flex flex-column align-start">
    <div class="d-flex align-center p-b-16">
      <label for="lang-select" class="p-r-16"> Choose a lang: </label>
      <select id="lang-select" v-model="locale.lang">
        <option
          v-for="(lang, index) in langsList"
          :key="index"
          :value="lang">
          {{ index }}
        </option>
      </select>
    </div>

    <VueDatePicker
      v-model="date"
      :locale="locale"
    />
  </div>
</template>

Choose a lang:

# Props: Inline

Allow you to show datepicker inline (without input)

<template>
  <VueDatePicker
    v-model="date"
    inline
  />
</template>

2025

Saturday 29 March

Sun

Mon

Tue

Wed

Thu

Fri

Sat

# Props: Type (Month)

Month datepicker

<template>
  <VueDatePicker
    v-model="date"
    min-date="2018-3"
    max-date="2019-3"
    type="month"
  />
</template>

# Props: Type (Quarter)

Quarter datepicker

<template>
  <VueDatePicker
    v-model="date"
    :min-date="minDate"
    :max-date="maxDate"
    type="quarter"
  />
</template>

# Props: Type (Year)

Year datepicker

<template>
  <VueDatePicker
    v-model="date"
    min-date="1980"
    max-date="2020"
    type="year"
  />
</template>

# Props: Range

Enable/disable Date range (actually only available for date)

<template>
  <VueDatePicker
    v-model="date"
    :min-date="minDate"
    :max-date="maxDate"
    placeholder="Début - Fin"
    range
    range-header-text="Du %d au %d"
    range-input-text="Du %d au %d"
    fullscreen-mobile
    validate
  />
</template>

# Props: Range (with presets)

Allow to add custom range presets to range datepicker. (Max custom presets = 6)

<template>
  <VueDatePicker
    v-model="date"
    :min-date="minDate"
    :max-date="maxDate"
    :range-presets="presets"
    placeholder="Début - Fin"
    range
    fullscreen-mobile
    validate
  />
</template>

# Props: Range with RTL mode

Using range picker in RTL mode

<template>
  <VueDatePicker
    v-model="date"
    :min-date="minDate"
    :max-date="maxDate"
    placeholder="Début - Fin"
    range
    range-header-text="Du %d au %d"
    range-input-text="Du %d au %d"
    fullscreen-mobile
    validate
    rtl
  />
</template>

# Custom day slot

Allows to change day appaearance, but you can also use tooltip or anything else if needed. Try to keep cursor on a day

<template>
  <VueDatePicker v-model="date" range validate>
    <!--
      # Values you can use with date scoped slot :
      day, isCurrent, isSelected, isBetween, isInRange, isFirstRangeDay, isLastRangeDay,
      isFirstSelectedDay, isLastSelectedDay, isDisabled
    -->
    <template #day="{ day }">
      <span title="it's a scoped slot day with custom title (could be a tooltip)">
        {{ day }}
      </span>
    </template>
  </VueDatePicker>
</template>

# Custom input-icon slot

Allows to change icon appaearance

<template>
  <VueDatePicker v-model="date">
    <template #input-icon>
      <i class="fa fa-calendar-week" />
    </template>
  </VueDatePicker>
</template>

Birthday picker

Starting with year picker by default, restricting dates range and closing the picker menu after selecting the day make the perfect birthday picker.

<template>
  <VueDatePicker
    v-model="date"
    ref="menu"
    :max-date="new Date().toISOString().substr(0, 10)"
    min-date="1980-01-01"
    @onOpen="menu = true"
    @onClose="menu = false"
  />
</template>

# Events

Events available

<template>
  <VueDatePicker
    v-model="date"
    @onOpen="showConsoleMessage('-- datepicker opened --')"
    @onChange="showConsoleMessage('-- date changed --')"
    @onClose="showConsoleMessage('-- datepicker closed --')"
    @onDestroy="showConsoleMessage('-- datepicker destroyed --')"
  />
</template>

# Custom activator

Possible to use a custom activator slot to trigger datepicker

<template>
  <VueDatePicker v-model="date">
    <!-- another notation: <template v-slot:activator="{ date }"> -->
    <!-- older notation: <template slot="activator" slot-scope="{ date }"> -->
    <!-- 2.6 notation -->
    <template #activator="{ date }">
      <button
        class="button custom__button"
        ref="activator"
        type="button"
      >
        {{ date }}
      </button>
    </template>
  </VueDatePicker>
</template>

Vue DatePicker