Skip to content

Commit 842318f

Browse files
charliekasselcharliekassel
authored
Merge pull request charliekassel#327 from b12f/master
Allow setting minimum and maximum view
2 parents cc79c74 + edecf70 commit 842318f

File tree

4 files changed

+202
-70
lines changed

4 files changed

+202
-70
lines changed

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,11 @@ Inline always open version
8282
| calendar-button | Boolean | false | Show an icon that that can be clicked |
8383
| calendar-button-icon | String | | Use icon for button (ex: fa fa-calendar) |
8484
| bootstrapStyling | Boolean | false | Output bootstrap styling classes |
85-
| initial-view | String | 'day' | If 'month' or 'year', open on that view |
85+
| initial-view | String | minimumView | If set, open on that view |
8686
| disabled-picker | Boolean | false | If true, disable Datepicker on screen |
8787
| required | Boolean | false | Sets html required attribute on input |
88-
| day-view-only | Boolean | false | If true, month and year views won't show |
88+
| minimum-view | String | 'day' | If set, lower-level views won't show |
89+
| maximum-view | String | 'year' | If set, higher-level views won't show |
8990

9091
## Events
9192

‎src/Demo.vue‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@
151151
<div class="settings">
152152
<h5>Settings</h5>
153153
<select v-model="language">
154-
<option :value="key" v-for="(language, key) in languages">{{ language.language }}</option>
154+
<option :value="key" v-for="(language, key) in languages" :key="key">{{ language.language }}</option>
155155
</select>
156156
</div>
157157
</div>
@@ -167,23 +167,47 @@
167167
<h3>RTL datepicker</h3>
168168
<datepicker language="he"></datepicker>
169169
<code>
170-
&lt;datepicker :inline="true"&gt;&lt;/datepicker&gt;
170+
&lt;datepicker language="he"&gt;&lt;/datepicker&gt;
171+
</code>
172+
</div>
173+
174+
<div class="example">
175+
<h3>Day view only</h3>
176+
<datepicker :minimumView="'day'" :maximumView="'day'"></datepicker>
177+
<code>
178+
&lt;datepicker :minimumView="'day'" :maximumView="'day'"&gt;&lt;/datepicker&gt;
171179
</code>
172180
</div>
173181

174182
<div class="example">
175183
<h3>Day view only RTL</h3>
176-
<datepicker :day-view-only="true" language="he"></datepicker>
184+
<datepicker :minimumView="'day'" :maximumView="'day'" language="he"></datepicker>
177185
<code>
178-
&lt;datepicker :day-view-only="true"&gt;&lt;/datepicker&gt;
186+
&lt;datepicker :minimumView="'day'" :maximumView="'day'" language="he"&gt;&lt;/datepicker&gt;
179187
</code>
180188
</div>
181189

182190
<div class="example">
183-
<h3>Day view only</h3>
184-
<datepicker :day-view-only="true"></datepicker>
191+
<h3>Month view only</h3>
192+
<datepicker :minimumView="'month'" :maximumView="'month'"></datepicker>
193+
<code>
194+
&lt;datepicker :minimumView="'month'" :maximumView="'month'"&gt;&lt;/datepicker&gt;
195+
</code>
196+
</div>
197+
198+
<div class="example">
199+
<h3>Day and month view only</h3>
200+
<datepicker :minimumView="'day'" :maximumView="'month'" :initialView="'month'"></datepicker>
201+
<code>
202+
&lt;datepicker :minimumView="'day'" :maximumView="'month'" :initialView="'month'"&gt;&lt;/datepicker&gt;
203+
</code>
204+
</div>
205+
206+
<div class="example">
207+
<h3>Year and month view only</h3>
208+
<datepicker :minimumView="'month'" :maximumView="'year'" :initialView="'year'"></datepicker>
185209
<code>
186-
&lt;datepicker :day-view-only="true"&gt;&lt;/datepicker&gt;
210+
&lt;datepicker :minimumView="'month'" :maximumView="'year'" :initialView="'year'"&gt;&lt;/datepicker&gt;
187211
</code>
188212
</div>
189213

‎src/components/Datepicker.vue‎

Lines changed: 89 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -29,40 +29,42 @@
2929
</div>
3030

3131
<!-- Day View -->
32-
<div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" v-bind:style="calendarStyle">
33-
<header>
34-
<span
35-
@click="isRtl ? nextMonth() : previousMonth()"
36-
class="prev"
37-
v-bind:class="{ 'disabled' : isRtl ? nextMonthDisabled(pageTimestamp) : previousMonthDisabled(pageTimestamp) }">&lt;</span>
38-
<span @click="showMonthCalendar" :class="!dayViewOnly ? 'up' : ''">{{ currMonthName }} {{ currYear }}
39-
</span>
40-
<span
41-
@click="isRtl ? previousMonth() : nextMonth()"
42-
class="next"
43-
v-bind:class="{ 'disabled' : isRtl ? previousMonthDisabled(pageTimestamp) : nextMonthDisabled(pageTimestamp) }">&gt;</span>
44-
</header>
45-
<div :class="isRtl ? 'flex-rtl' : ''">
46-
<span class="cell day-header" v-for="d in daysOfWeek" :key="d.timestamp">{{ d }}</span>
47-
<span class="cell day blank" v-for="d in blankDays" :key="d.timestamp"></span><!--
48-
--><span class="cell day"
49-
v-for="day in days"
50-
:key="day.timestamp"
51-
track-by="timestamp"
52-
v-bind:class="dayClasses(day)"
53-
@click="selectDate(day)">{{ day.date }}</span>
54-
</div>
55-
</div>
32+
<template v-if="allowedToShowView('day')">
33+
<div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" v-bind:style="calendarStyle">
34+
<header>
35+
<span
36+
@click="isRtl ? nextMonth() : previousMonth()"
37+
class="prev"
38+
v-bind:class="{ 'disabled' : isRtl ? nextMonthDisabled(pageTimestamp) : previousMonthDisabled(pageTimestamp) }">&lt;</span>
39+
<span @click="showMonthCalendar" :class="allowedToShowView('month') ? 'up' : ''">{{ currMonthName }} {{ currYear }}
40+
</span>
41+
<span
42+
@click="isRtl ? previousMonth() : nextMonth()"
43+
class="next"
44+
v-bind:class="{ 'disabled' : isRtl ? previousMonthDisabled(pageTimestamp) : nextMonthDisabled(pageTimestamp) }">&gt;</span>
45+
</header>
46+
<div :class="isRtl ? 'flex-rtl' : ''">
47+
<span class="cell day-header" v-for="d in daysOfWeek" :key="d.timestamp">{{ d }}</span>
48+
<span class="cell day blank" v-for="d in blankDays" :key="d.timestamp"></span><!--
49+
--><span class="cell day"
50+
v-for="day in days"
51+
:key="day.timestamp"
52+
track-by="timestamp"
53+
v-bind:class="dayClasses(day)"
54+
@click="selectDate(day)">{{ day.date }}</span>
55+
</div>
56+
</div>
57+
</template>
5658

5759
<!-- Month View -->
58-
<template v-if="!dayViewOnly">
60+
<template v-if="allowedToShowView('month')">
5961
<div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showMonthView" v-bind:style="calendarStyle">
6062
<header>
6163
<span
6264
@click="previousYear"
6365
class="prev"
6466
v-bind:class="{ 'disabled' : previousYearDisabled(pageTimestamp) }">&lt;</span>
65-
<span @click="showYearCalendar" class="up">{{ getPageYear() }}</span>
67+
<span @click="showYearCalendar" :class="allowedToShowView('year') ? 'up' : ''">{{ getPageYear() }}</span>
6668
<span
6769
@click="nextYear"
6870
class="next"
@@ -78,7 +80,7 @@
7880
</template>
7981

8082
<!-- Year View -->
81-
<template v-if="!dayViewOnly">
83+
<template v-if="allowedToShowView('year')">
8284
<div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showYearView" v-bind:style="calendarStyle">
8385
<header>
8486
<span @click="previousDecade" class="prev"
@@ -134,13 +136,17 @@ export default {
134136
calendarButton: Boolean,
135137
calendarButtonIcon: String,
136138
bootstrapStyling: Boolean,
137-
initialView: {
139+
initialView: String,
140+
disabledPicker: Boolean,
141+
required: Boolean,
142+
minimumView: {
138143
type: String,
139144
default: 'day'
140145
},
141-
disabledPicker: Boolean,
142-
required: Boolean,
143-
dayViewOnly: Boolean
146+
maximumView: {
147+
type: String,
148+
default: 'year'
149+
}
144150
},
145151
data () {
146152
return {
@@ -177,6 +183,13 @@ export default {
177183
}
178184
},
179185
computed: {
186+
computedInitialView () {
187+
if (!this.initialView) {
188+
return this.minimumView
189+
}
190+
191+
return this.initialView
192+
},
180193
pageDate () {
181194
return new Date(this.pageTimestamp)
182195
},
@@ -321,9 +334,18 @@ export default {
321334
return this.close()
322335
}
323336
this.setInitialView()
337+
if (!this.isInline) {
338+
this.$emit('opened')
339+
}
324340
},
325341
setInitialView () {
326-
switch (this.initialView) {
342+
const initialView = this.computedInitialView
343+
344+
if (!this.allowedToShowView(initialView)) {
345+
throw new Error(`initialView '${this.initialView}' cannot be rendered based on minimum '${this.minimumView}' and maximum '${this.maximumView}'`)
346+
}
347+
348+
switch (initialView) {
327349
case 'year':
328350
this.showYearCalendar()
329351
break
@@ -335,23 +357,35 @@ export default {
335357
break
336358
}
337359
},
360+
allowedToShowView (view) {
361+
const views = ['day', 'month', 'year']
362+
const minimumViewIndex = views.indexOf(this.minimumView)
363+
const maximumViewIndex = views.indexOf(this.maximumView)
364+
const viewIndex = views.indexOf(view)
365+
366+
return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex
367+
},
338368
showDayCalendar () {
369+
if (!this.allowedToShowView('day')) return false
370+
339371
this.close()
340372
this.showDayView = true
341373
if (!this.isInline) {
342-
this.$emit('opened')
343374
document.addEventListener('click', this.clickOutside, false)
344375
}
345376
},
346377
showMonthCalendar () {
347-
if (this.dayViewOnly) return false
378+
if (!this.allowedToShowView('month')) return false
379+
348380
this.close()
349381
this.showMonthView = true
350382
if (!this.isInline) {
351383
document.addEventListener('click', this.clickOutside, false)
352384
}
353385
},
354386
showYearCalendar () {
387+
if (!this.allowedToShowView('year')) return false
388+
355389
this.close()
356390
this.showYearView = true
357391
if (!this.isInline) {
@@ -381,9 +415,10 @@ export default {
381415
}
382416
this.setDate(day.timestamp)
383417
if (this.isInline) {
384-
return this.showDayCalendar()
418+
this.showDayCalendar()
419+
} else {
420+
this.close()
385421
}
386-
this.close()
387422
},
388423
/**
389424
* @param {Object} month
@@ -392,10 +427,16 @@ export default {
392427
if (month.isDisabled) {
393428
return false
394429
}
430+
395431
const date = new Date(month.timestamp)
396-
this.setPageDate(date)
397-
this.showDayCalendar()
398-
this.$emit('changedMonth', month)
432+
if (this.allowedToShowView('day')) {
433+
this.setPageDate(date)
434+
this.$emit('changedMonth', month)
435+
this.showDayCalendar()
436+
} else {
437+
this.setDate(date)
438+
this.close()
439+
}
399440
},
400441
/**
401442
* @param {Object} year
@@ -404,10 +445,16 @@ export default {
404445
if (year.isDisabled) {
405446
return false
406447
}
448+
407449
const date = new Date(year.timestamp)
408-
this.setPageDate(date)
409-
this.showMonthCalendar()
410-
this.$emit('changedYear', year)
450+
if (this.allowedToShowView('month')) {
451+
this.setPageDate(date)
452+
this.$emit('changedYear', year)
453+
this.showMonthCalendar()
454+
} else {
455+
this.setDate(date)
456+
this.close()
457+
}
411458
},
412459
/**
413460
* @return {Number}

0 commit comments

Comments
 (0)