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

Add notBefore and notAfter props to optionally disable all dates before / after a given date

Browse Source
This commit is contained in:
Aaron J. Rubin
2017-06-14 15:37:47 -04:00
parent 42e7853018
commit 7427c795c3
3 changed files with 56 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+11 -9
View File
@@ -39,14 +39,16 @@ export default {
``` ```
## Attributes ## Attributes
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
|-----------------|---------------|-------------|---------------------------------------| |-----------------|---------------|-------------|---------------------------------------------------|
| range | Boolean | false | if true, the type is daterange | | range | Boolean | false | if true, the type is daterange |
| format | String | yyyy-MM-dd | Date formatting string | | format | String | yyyy-MM-dd | Date formatting string |
| lang | String | zh | Translation (en/zh/es) | | lang | String | zh | Translation (en/zh/es) |
| 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 | | showYearNav | Boolean | true | Show the year nav in the calendar |
| notBefore | String | '' | Disable all dates before date in YYY-MM-DD format |
| notAfter | String | '' | Disable all dates after date in YYY-MM-DD format |
datepicker/calendar-panel.vue
+13
View File
@@ -48,6 +48,14 @@ export default {
showYearNav: { showYearNav: {
type: Boolean, type: Boolean,
default: true default: true
},
notBefore: {
type: String,
default: ''
},
notAfter: {
type: String,
default: ''
} }
}, },
data () { data () {
@@ -152,6 +160,11 @@ export default {
if ( typeof this.disabledDays.find(function(disabledDate) { return disabledDate === cell.iso } ) !== 'undefined' ) { if ( typeof this.disabledDays.find(function(disabledDate) { return disabledDate === cell.iso } ) !== 'undefined' ) {
classes.push('disabled'); classes.push('disabled');
} else if (
(this.notBefore !== '' && cell.date.getTime() < (new Date(this.notBefore)).getTime()) ||
(this.notAfter !== '' && cell.date.getTime() > (new Date(this.notAfter)).getTime())
) {
classes.push('disabled');
} }
if (cellTime === today) { if (cellTime === today) {
datepicker/index.vue
+32 -3
View File
@@ -20,14 +20,35 @@
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" :showYearNav="showYearNav"></calendar-panel> <calendar-panel @select="showPopup = false"
v-model="currentValue"
:show="showPopup"
:disabledDays="disabledDays"
:showYearNav="showYearNav"
:notBefore="notBefore"
:notAfter="notAfter"></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" :showYearNav="showYearNav"></calendar-panel> <calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)"
<calendar-panel style="width:50%;" v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup" :disabledDays="disabledDays" :showYearNav="showYearNav"></calendar-panel> v-model="currentValue[0]"
:end-at="currentValue[1]"
:show="showPopup"
:disabledDays="disabledDays"
:showYearNav="showYearNav"
:notBefore="notBefore"
:notAfter="notAfter"
></calendar-panel>
<calendar-panel style="width:50%;"
v-model="currentValue[1]"
:start-at="currentValue[0]"
:show="showPopup"
:disabledDays="disabledDays"
:showYearNav="showYearNav"
:notBefore="notBefore"
:notAfter="notAfter"></calendar-panel>
</template> </template>
</div> </div>
</div> </div>
@@ -65,6 +86,14 @@ export default {
showYearNav: { showYearNav: {
type: Boolean, type: Boolean,
default: true default: true
},
notBefore: {
type: String,
default: ''
},
notAfter: {
type: String,
default: ''
} }
}, },
data () { data () {