Home

Awesome

Datepicker

Travis Build Version Coveralls github Downloads

A datepicker Vue component. Compatible with Vue 2.x

NB. Vue 1.x was supported up to version v0.9.9. If you want to use this component with Vue 1.x you can install with npm install vuejs-datepicker@0.9.9

Demo

To view a demo online: https://codesandbox.io/s/mpklq49wp

To view demo examples locally clone the repo and run npm install && npm run serve

Install

npm install vuejs-datepicker --save
import Datepicker from 'vuejs-datepicker';

export default {
  // ...
  components: {
    Datepicker
  }
  // ...
}

Or use directly from a CDN

<div id="app">
  <vuejs-datepicker></vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<script>
const app = new Vue({
  el: '#app',
  components: {
  	vuejsDatepicker
  }
})
</script>

<!-- French language example -->
<div id="app">
  <vuejs-datepicker :language="fr"></vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<script src="https://unpkg.com/vuejs-datepicker/dist/locale/translations/fr.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data() {
    return {
      fr: vdp_translation_fr.js
    }
  },
  components: {
  	vuejsDatepicker
  }
})
</script>

Usage

<datepicker></datepicker>

value prop if passed should be a Date object

<script>
var state = {
  date: new Date(2016, 9,  16)
}
</script>
<datepicker :value="state.date"></datepicker>

support name attribute for normal html form submission

<datepicker :value="state.date" name="uniquename"></datepicker>

Using v-model

<datepicker v-model="state.date" name="uniquename"></datepicker>

Emits events

<datepicker @selected="doSomethingInParentComponentFunction" @opened="datepickerOpenedFunction" @closed="datepickerClosedFunction">

Inline always open version

<datepicker :inline="true"></datepicker>

Available props

PropTypeDefaultDescription
valueDate|StringDate value of the datepicker
nameStringInput name property
idStringInput id
formatString|Functiondd MMM yyyyDate formatting string or function
full-month-nameBooleanfalseTo show the full month name
languageObjectenTranslation for days and months
disabled-datesObjectSee below for configuration
placeholderStringInput placeholder text
inlineBooleanTo show the datepicker always open
calendar-classString|ObjectCSS class applied to the calendar el
input-classString|ObjectCSS class applied to the input el
wrapper-classString|ObjectCSS class applied to the outer div
monday-firstBooleanfalseTo start the week on Monday
clear-buttonBooleanfalseShow an icon for clearing the date
clear-button-iconStringUse icon for button (ex: fa fa-times)
calendar-buttonBooleanfalseShow an icon that that can be clicked
calendar-button-iconStringUse icon for button (ex: fa fa-calendar)
calendar-button-icon-contentStringUse for material-icons (ex: event)
day-cell-contentFunctionUse to render custom content in day cell
bootstrap-stylingBooleanfalseOutput bootstrap v4 styling classes.
initial-viewStringminimumViewIf set, open on that view
disabledBooleanfalseIf true, disable Datepicker on screen
requiredBooleanfalseSets html required attribute on input
typeableBooleanfalseIf true, allow the user to type the date
use-utcBooleanfalseuse UTC for time calculations
open-dateDate|StringIf set, open on that date
minimum-viewString'day'If set, lower-level views won't show
maximum-viewString'year'If set, higher-level views won't show

Events

These events are emitted on actions in the datepicker

EventOutputDescription
openedThe picker is opened
closedThe picker is closed
selectedDate|nullA date has been selected
selectedDisabledObjectA disabled date has been selected
inputDate|nullInput value has been modified
clearedSelected date has been cleared
changedMonthObjectMonth page has been changed
changedYearObjectYear page has been changed
changedDecadeObjectDecade page has been changed

Date formatting

String formatter

NB. This is not very robust at all - use at your own risk! Needs a better implementation.

TokenDescExample
dday1
dd0 prefixed day01
Dabbr dayMon
sudate suffixst, nd, rd
Mmonth number (1 based)1 (for Jan)
MM0 prefixed month01
MMMabbreviated month nameJan
MMMMmonth nameJanuary
yytwo digit year16
yyyyfour digit year2016

Function formatter

Delegates date formatting to provided function. Function will be called with date and it has to return formated date as a string. This allow us to use moment, date-fns, globalize or any other library to format date.

<script>
  methods: {
    customFormatter(date) {
      return moment(date).format('MMMM Do YYYY, h:mm:ss a');
    }
  }
</script>
<datepicker :format="customFormatter"></datepicker>

Disabled Dates

Dates can be disabled in a number of ways.

<script>
var state = {
  disabledDates: {
    to: new Date(2016, 0, 5), // Disable all dates up to specific date
    from: new Date(2016, 0, 26), // Disable all dates after specific date
    days: [6, 0], // Disable Saturday's and Sunday's
    daysOfMonth: [29, 30, 31], // Disable 29th, 30th and 31st of each month
    dates: [ // Disable an array of dates
      new Date(2016, 9, 16),
      new Date(2016, 9, 17),
      new Date(2016, 9, 18)
    ],
    ranges: [{ // Disable dates in given ranges (exclusive).
      from: new Date(2016, 11, 25),
      to: new Date(2016, 11, 30)
    }, {
      from: new Date(2017, 1, 12),
      to: new Date(2017, 2, 25)
    }],
    // a custom function that returns true if the date is disabled
    // this can be used for wiring you own logic to disable a date if none
    // of the above conditions serve your purpose
    // this function should accept a date and return true if is disabled
    customPredictor: function(date) {
      // disables the date if it is a multiple of 5
      if(date.getDate() % 5 == 0){
        return true
      }
    }
  }
}
</script>
<datepicker :disabled-dates="state.disabledDates"></datepicker>

Highlighted Dates

Dates can be highlighted (e.g. for marking an appointment) in a number of ways. Important: By default disabled dates are ignored, to highlight disabled dates set the includeDisabled property to true. Note: Both to and from properties are required to define a range of dates to highlight.

<script>
var state = {
  highlighted: {
    to: new Date(2016, 0, 5), // Highlight all dates up to specific date
    from: new Date(2016, 0, 26), // Highlight all dates after specific date
    days: [6, 0], // Highlight Saturday's and Sunday's
    daysOfMonth: [15, 20, 31], // Highlight 15th, 20th and 31st of each month
    dates: [ // Highlight an array of dates
      new Date(2016, 9, 16),
      new Date(2016, 9, 17),
      new Date(2016, 9, 18)
    ],
    // a custom function that returns true of the date is highlighted
    // this can be used for wiring you own logic to highlight a date if none
    // of the above conditions serve your purpose
    // this function should accept a date and return true if is highlighted
    customPredictor: function(date) {
      // highlights the date if it is a multiple of 4
      if(date.getDate() % 4 == 0){
        return true
      }
    },
    includeDisabled: true // Highlight disabled dates
  }
}
</script>
<datepicker :highlighted="state.highlighted"></datepicker>

Slots

Slots will help you customize content. .

beforeCalendarHeader

Sometimes you need to show custom content before the calendar header. For such cases you can use the named slot beforeCalendarHeader.

An example would be to use bootstrap's input-group-prepend and input-group-append to show some custom text:

<datepicker :bootstrap-styling="true">
  <div slot="beforeCalendarHeader" class="calender-header">
    Choose a Date
  </div>
</datepicker>

afterDateInput

To implement some custom styling (for instance to add an animated placeholder) on DateInput, you might need to add elements as DateInput siblings. Slot named afterDateInput allows you to do that:

<datepicker>
  <span slot="afterDateInput" class="animated-placeholder">
    Choose a Date
  </span>
</datepicker>

Translations

Contributing guide - please use appropriate code from this list as the translation property.

How to apply language

Below script tag in component.

import {en, es} from 'vuejs-datepicker/dist/locale'

In component data.

data () {
    return {
      en: en,
      es: es
    }
}

html.

<datepicker :language="es"></datepicker>

Available languages

AbbrLanguage
afAfrikaans
arArabic
bgBulgarian
bsBosnian
caCatalan
csCzech
daDanish
deGerman
eeEstonian
elGreek
enEnglishDefault
esSpanish
faPersian (Farsi)
fiFinnish
foFaroese
frFrench
geGeorgia
glGalician
heHebrew
huHungarian
hrCroatian
idIndonesian
isIcelandic
itItalian
jaJapanese
kkKazakh
koKorean
lbLuxembourgish
ltLithuanian
lvLatvian
mkMacedonian
mnMongolian
nbNONorwegian Bokmål
nlDutch
plPolish
ptBRPortuguese-Brazil
roRomanian
ruRussian
skSlovak
slSISlovenian
svSwedish
srSerbian (Latin)
srCyrlSerbian (Cyrl)
thThai
trTurkish
ukUkrainian
urUrdu
viVietnamese
zhChinese
zhHKChinese_HK