Awesome
vue-date-picker
datepicker component for Vue 2.x
Screenshot
Instllation
$ npm install vue-date-picker --save
Usage
<template>
<div class="demo">
<datepicker :readonly="true" format="YYYY-MM-DD" name="date1"></datepicker>
<datepicker value="2018-9-5" format="YYYY-M-D" name="date2" :input-attr="{ 'data-test': 'value' }"></datepicker>
<datepicker :readonly="true" format="MMM/D/YYYY" name="date3" :disabled-date="disabledDate"></datepicker>
</div>
</template>
<script>
import datepicker from 'vue-date-picker'
export default {
components: {
datepicker
},
methods: {
disabledDate (date) {
return date.getTime() < Date.now()
}
}
}
</script>
Prop
| Prop | Type | Default | Description |
|---|---|---|---|
| value | String | -- | Date value of the datepicker |
| name | String | -- | Input name property |
| format | String | YYYY-MM-DD | Date formatting string |
| readonly | String | false | Input readonly property |
| input-class | Array | Object | -- | Binding class for input |
| input-style | Array | Object | -- | Binding inline style for input |
| input-attr | Object | -- | Binding attribute for input |
| calendar-class | Array | Object | -- | Binding class for calendar |
| calendar-style | Array | Object | -- | Binding inline style for calendar |
| calendar-attr | Object | -- | Binding attribute for calendar |
| disabled-date | Function | -- | A function that determines if you want to disable dates |