mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-23 02:20:36 +03:00
Code Activity

Add default empty array for disabledDays, add showYearNav prop

Browse Source
This commit is contained in:
Aaron J. Rubin
2017-06-12 08:24:16 -04:00
parent a13290a35f
commit fe36d75c13
3 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -47,5 +47,6 @@ export default {
| placeholder | String | | input placeholder text | | placeholder | String | | input placeholder text |
| width | String/Number | 210 | input size | | width | String/Number | 210 | input size |
| disabledDays | Array | [] | Days in YYYY-MM-DD format to disable | | disabledDays | Array | [] | Days in YYYY-MM-DD format to disable |
| showYearNav | Boolean | true | Show the year nav in the calendar |
datepicker/calendar-panel.vue
+10 -3
View File
@@ -1,9 +1,9 @@
<template> <template>
<div class="calendar"> <div class="calendar">
<div class="calendar-header"> <div class="calendar-header">
<a class="calendar__prev-icon" @click="changeYear(-1)">&laquo;</a> <a v-show="showYearNav" class="calendar__prev-icon" @click="changeYear(-1)">&laquo;</a>
<a v-show="currentPanel === 'date'" class="calendar__prev-icon" @click="changeMonth(-1)">&lsaquo;</a> <a v-show="currentPanel === 'date'" class="calendar__prev-icon" @click="changeMonth(-1)">&lsaquo;</a>
<a class="calendar__next-icon" @click="changeYear(1)">&raquo;</a> <a v-show="showYearNav" class="calendar__next-icon" @click="changeYear(1)">&raquo;</a>
<a v-show="currentPanel === 'date'" class="calendar__next-icon" @click="changeMonth(1)" >&rsaquo;</a> <a v-show="currentPanel === 'date'" class="calendar__next-icon" @click="changeMonth(1)" >&rsaquo;</a>
<a @click="showMonths">{{months[currentMonth]}}</a> <a @click="showMonths">{{months[currentMonth]}}</a>
<a @click="showYears">{{currentYear}}</a> <a @click="showYears">{{currentYear}}</a>
@@ -41,7 +41,14 @@ export default {
endAt: null, endAt: null,
value: null, value: null,
show: Boolean, show: Boolean,
disabledDays: Array disabledDays: {
type: Array,
default: []
},
showYearNav: {
type: Boolean,
default: true
}
}, },
data () { data () {
const translation = this.$parent.translation const translation = this.$parent.translation
datepicker/index.vue
+11 -4
View File
@@ -20,14 +20,14 @@
ref="calendar" ref="calendar"
v-show="showPopup"> v-show="showPopup">
<template v-if="!range"> <template v-if="!range">
<calendar-panel @select="showPopup = false" v-model="currentValue" :show="showPopup" :disabledDays="disabledDays"></calendar-panel> <calendar-panel @select="showPopup = false" v-model="currentValue" :show="showPopup" :disabledDays="disabledDays" :showYearNav="showYearNav"></calendar-panel>
</template> </template>
<template v-else> <template v-else>
<div class="datepicker-top"> <div class="datepicker-top">
<span v-for="range in ranges" @click="selectRange(range)">{{range.text}}</span> <span v-for="range in ranges" @click="selectRange(range)">{{range.text}}</span>
</div> </div>
<calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)" v-model="currentValue[0]" :end-at="currentValue[1]" :show="showPopup" :disabledDays="disabledDays"></calendar-panel> <calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)" v-model="currentValue[0]" :end-at="currentValue[1]" :show="showPopup" :disabledDays="disabledDays" :showYearNav="showYearNav"></calendar-panel>
<calendar-panel style="width:50%;" v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup" :disabledDays="disabledDays"></calendar-panel> <calendar-panel style="width:50%;" v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup" :disabledDays="disabledDays" :showYearNav="showYearNav"></calendar-panel>
</template> </template>
</div> </div>
</div> </div>
@@ -58,7 +58,14 @@ export default {
default: 'zh' default: 'zh'
}, },
value: null, value: null,
disabledDays: Array disabledDays: {
type: Array,
default: []
},
showYearNav: {
type: Boolean,
default: true
}
}, },
data () { data () {
return { return {