Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/charliekassel/vuejs-datepicker
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
https://github.com/charliekassel/vuejs-datepicker
date date-picker datepicker vue vuejs
Last synced: 3 days ago
JSON representation
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
- Host: GitHub
- URL: https://github.com/charliekassel/vuejs-datepicker
- Owner: charliekassel
- License: mit
- Created: 2016-02-22T10:48:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-07-09T15:37:08.000Z (5 months ago)
- Last Synced: 2024-11-30T07:02:59.862Z (12 days ago)
- Topics: date, date-picker, datepicker, vue, vuejs
- Language: JavaScript
- Homepage:
- Size: 2.24 MB
- Stars: 2,613
- Watchers: 43
- Forks: 732
- Open Issues: 264
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vuejs-datepicker - datepicker?style=social) - vue日期选择器组件 (UI组件)
- awesome-vue - vuejs-datepicker - vue日期选择器组件 (UI组件)
- awesome-vue-js - Vue.js Datepicker
- awesome-github-vue - vuejs-datepicker - vue日期选择器组件 (UI组件)
- awesome - vuejs-datepicker - vue日期选择器组件 (UI组件)
- awesome-github-vue - vuejs-datepicker - vue日期选择器组件 (UI组件)
README
# Datepicker
[](https://travis-ci.org/charliekassel/vuejs-datepicker)
[](https://www.npmjs.com/package/vuejs-datepicker)
[](https://coveralls.io/github/charliekassel/vuejs-datepicker?branch=master)
[](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 [email protected]`
## 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
const app = new Vue({
el: '#app',
components: {
vuejsDatepicker
}
})
const app = new Vue({
el: '#app',
data() {
return {
fr: vdp_translation_fr.js
}
},
components: {
vuejsDatepicker
}
})
```
## Usage
``` html
```
*value* prop if passed should be a Date object
``` html
var state = {
date: new Date(2016, 9, 16)
}
```
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
methods: {
customFormatter(date) {
return moment(date).format('MMMM Do YYYY, h:mm:ss a');
}
}
```
## Disabled Dates
Dates can be disabled in a number of ways.
``` html
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
}
}
}
}
```
## 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
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
}
}
```
## 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 | |