# Datepicker [![Travis Build](https://img.shields.io/travis/charliekassel/vuejs-datepicker.svg)](https://travis-ci.org/charliekassel/vuejs-datepicker) [![Version](https://img.shields.io/npm/v/vuejs-datepicker.svg)](https://www.npmjs.com/package/vuejs-datepicker) [![Coveralls github](https://img.shields.io/coveralls/github/charliekassel/vuejs-datepicker.svg)](https://coveralls.io/github/charliekassel/vuejs-datepicker?branch=master) [![Downloads](https://img.shields.io/npm/dm/vuejs-datepicker.svg)](https://www.npmjs.com/package/vuejs-datepicker) A datepicker Vue component. Compatible with Vue 2.x - [Demo](#demo) - [Install](#install) - [Usage](#usage) - [Date Formatting](#date-formatting) - [Props](#available-props) - [Events](#events) - [Disabled dates](#disabled-dates) - [Highlighted dates](#highlighted-dates) - [Translations](#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 ``` bash npm install vuejs-datepicker --save ``` ``` javascript import Datepicker from 'vuejs-datepicker'; export default { // ... components: { Datepicker } // ... } ``` Or use directly from a CDN ``` html

``` ## Usage ``` html ``` *value* prop if passed should be a Date object ``` html ``` support name attribute for normal html form submission ``` html ``` Using `v-model` ``` html ``` Emits events ``` html ``` Inline always open version ``` html ``` ## Available props | Prop | Type | Default | Description | |-------------------------------|-----------------|-------------|------------------------------------------| | value | Date\|String | | Date value of the datepicker | | name | String | | Input name property | | id | String | | Input id | | format | String\|Function| dd MMM yyyy | Date formatting string or function | | full-month-name | Boolean | false | To show the full month name | | language | Object | en | Translation for days and months | | disabled-dates | Object | | See below for configuration | | placeholder | String | | Input placeholder text | | inline | Boolean | | To show the datepicker always open | | calendar-class | String\|Object | | CSS class applied to the calendar el | | input-class | String\|Object | | CSS class applied to the input el | | wrapper-class | String\|Object | | CSS class applied to the outer div | | monday-first | Boolean | false | To start the week on Monday | | clear-button | Boolean | false | Show an icon for clearing the date | | clear-button-icon | String | | Use icon for button (ex: fa fa-times) | | calendar-button | Boolean | false | Show an icon that that can be clicked | | calendar-button-icon | String | | Use icon for button (ex: fa fa-calendar) | | calendar-button-icon-content | String | | Use for material-icons (ex: event) | | day-cell-content | Function | | Use to render custom content in day cell | | bootstrap-styling | Boolean | false | Output bootstrap v4 styling classes. | | initial-view | String | minimumView | If set, open on that view | | disabled | Boolean | false | If true, disable Datepicker on screen | | required | Boolean | false | Sets html required attribute on input | | typeable | Boolean | false | If true, allow the user to type the date | | use-utc | Boolean | false | use UTC for time calculations | | open-date | Date\|String | | If set, open on that date | | minimum-view | String | 'day' | If set, lower-level views won't show | | maximum-view | String | 'year' | If set, higher-level views won't show | ## Events These events are emitted on actions in the datepicker | Event | Output | Description | |-------------------|------------|--------------------------------------| | opened | | The picker is opened | | closed | | The picker is closed | | selected | Date\|null | A date has been selected | | selectedDisabled | Object | A disabled date has been selected | | input | Date\|null | Input value has been modified | | cleared | | Selected date has been cleared | | changedMonth | Object | Month page has been changed | | changedYear | Object | Year page has been changed | | changedDecade | Object | Decade 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. | Token | Desc | Example | |-------|------------------------|-------------| | d | day | 1 | | dd | 0 prefixed day | 01 | | D | abbr day | Mon | | su | date suffix | st, nd, rd | | M | month number (1 based) | 1 (for Jan) | | MM | 0 prefixed month | 01 | | MMM | abbreviated month name | Jan | | MMMM | month name | January | | yy | two digit year | 16 | | yyyy | four digit year | 2016 | #### 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. ``` html ``` ## Disabled Dates Dates can be disabled in a number of ways. ``` html ``` ## 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. ``` html ``` ## 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: ``` html

Choose a Date

``` #### 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: ``` html Choose a Date ``` ## Translations Contributing guide - please use appropriate code from this [list](http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) 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. ```javascript import {en, es} from 'vuejs-datepicker/dist/locale' ``` In component data. ```javascript data () { return { en: en, es: es } } ``` html. ```javascript ``` Available languages | Abbr | Language | | | ----------- |------------------|----------| | af | Afrikaans | | | ar | Arabic | | | bg | Bulgarian | | | bs | Bosnian | | | ca | Catalan | | | cs | Czech | | | da | Danish | | | de | German | | | ee | Estonian | | | el | Greek | | | en | English | *Default*| | es | Spanish | | | fa | Persian (Farsi) | | | fi | Finnish | | | fo | Faroese | | | fr | French | | | ge | Georgia | | | gl | Galician | | | he | Hebrew | | | hu | Hungarian | | | hr | Croatian | | | id | Indonesian | | | is | Icelandic | | | it | Italian | | | ja | Japanese | | | kk | Kazakh | | | ko | Korean | | | lb | Luxembourgish | | | lt | Lithuanian | | | lv | Latvian | | | mk | Macedonian | | | mn | Mongolian | | | nbNO | Norwegian Bokmål | | | nl | Dutch | | | pl | Polish | | | ptBR | Portuguese-Brazil| | | ro | Romanian | | | ru | Russian | | | sk | Slovak | | | slSI | Slovenian | | | sv | Swedish | | | sr | Serbian (Latin) | | | srCyrl | Serbian (Cyrl) | | | th | Thai | | | tr | Turkish | | | uk | Ukrainian | | | ur | Urdu | | | vi | Vietnamese | | | zh | Chinese | | | zhHK | Chinese_HK | |

vuejs-datepicker

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past