Datepicker

A datepicker Vue component. Compatible with Vue 2.x

• Demo
• Install
• Usage
• Date Formatting
• Props
• Events
• Disabled dates
• Highlighted dates
• Translations

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">
  
</div>





<div id="app">
  
</div>

Usage

value prop if passed should be a Date object

support name attribute for normal html form submission

Using v-model

Emits events

Inline always open version

Available props

Events

These events are emitted on actions in the datepicker

Date formatting

String formatter

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

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.

Disabled Dates

Dates can be disabled in a number of ways.

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.

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:

  <div class="calender-header" slot="beforeCalendarHeader">
    Choose a Date
  </div>

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:

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

Translations

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

• Add your language as a module in the src/locale/translations dir.
• Import and export it in the src/locale/index file
• Add the Language to the available languages in the readme file.
• Run npm run lint to make sure your code formatting is in line with the required code style.

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.

Available languages