A datepicker Vue component. Compatible with Vue 1.x and Vue 2.x
http://www.webpackbin.com/N1vgz1XRb
$ npm install vuejs-datepicker --saveimport Datepicker from 'vuejs-datepicker';
Vue.component('my-component', {
components: {
Datepicker
}
});<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>Emits events
<datepicker v-on:selected="doSomethingInParentComponentFunction" v-on:opened="datepickerOpenedFunction">Inline always open version
<datepicker :inline="true"></datepicker>| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | Date value of the datepicker | |
| name | String | input name property | |
| format | String | dd MMM yyyy | Date formatting string |
| language | String | en | Translation for days and months |
| disabled | Object | See below for configuration | |
| placeholder | String | input placeholder text | |
| inline | Boolean | to show the datepicker always open | |
| inputClass | String | css class applied to the input el | |
| wrapperClass | String | css class applied to the outer div | |
| mondayFirst | Boolean | false | To start the week on Monday |
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 |
Dates can disabled in a number of ways.
<script>
var state = {
disabled: {
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
dates: [ // Disable an array of dates
new Date(2016, 9, 16),
new Date(2016, 9, 17),
new Date(2016, 9, 18)
]
}
}
</script>
<datepicker :disabled="state.disabled"></datepicker><datepicker language="es"></datepicker>Available languages
| Abbr | Language | |
|---|---|---|
| en | English | Default |
| es | Spanish | |
| fi | Finnish | |
| fr | French | |
| hr | Croatian | |
| it | Italian | |
| nl | Dutch | |
| de | German | |
| da | Danish | |
| cs | Czech | |
| pt-br | Portuguese-Brazil | |
| vi | Vietnamese | |
| zh | Chinese | |
| ja | Japanese | |
| he | Hebrew | |
| ru | Russian | |
| sv | Swedish | |
| th | Thai |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent