Skip to content

Commit e71e1c0

Browse files
pdongpdong
committed
Update branch with master.
2 parents 1b946c1 + 0db6f1e commit e71e1c0

File tree

6 files changed

+222
-72
lines changed

6 files changed

+222
-72
lines changed

‎README.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,12 @@ 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 |
89-
| open-date | Date\|Strng | | Open on that date |
88+
| open-date | Date\|Strng | | If set, open on that date |
89+
| minimum-view | String | 'day' | If set, lower-level views won't show |
90+
| maximum-view | String | 'year' | If set, higher-level views won't show |
9091

9192
## Events
9293

@@ -264,6 +265,8 @@ Available languages
264265
| sk | Slovak | |
265266
| sl-si | Slovenian | |
266267
| sv | Swedish | |
268+
| sr | Serbian (Latin) | |
269+
| sr-Cyrl | Serbian (Cyrl) | |
267270
| th | Thai | |
268271
| tr | Turkish | |
269272
| uk | Ukrainian | |

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vuejs-datepicker",
3-
"version": "0.9.18",
3+
"version": "0.9.19",
44
"description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations",
55
"keywords": [
66
"vue",

‎src/Demo.vue‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@
167167
<div class="settings">
168168
<h5>Settings</h5>
169169
<select v-model="language">
170-
<option :value="key" v-for="(language, key) in languages">{{ language.language }}</option>
170+
<option :value="key" v-for="(language, key) in languages" :key="key">{{ language.language }}</option>
171171
</select>
172172
</div>
173173
</div>
@@ -183,23 +183,47 @@
183183
<h3>RTL datepicker</h3>
184184
<datepicker language="he"></datepicker>
185185
<code>
186-
&lt;datepicker :inline="true"&gt;&lt;/datepicker&gt;
186+
&lt;datepicker language="he"&gt;&lt;/datepicker&gt;
187+
</code>
188+
</div>
189+
190+
<div class="example">
191+
<h3>Day view only</h3>
192+
<datepicker :minimumView="'day'" :maximumView="'day'"></datepicker>
193+
<code>
194+
&lt;datepicker :minimumView="'day'" :maximumView="'day'"&gt;&lt;/datepicker&gt;
187195
</code>
188196
</div>
189197

190198
<div class="example">
191199
<h3>Day view only RTL</h3>
192-
<datepicker :day-view-only="true" language="he"></datepicker>
200+
<datepicker :minimumView="'day'" :maximumView="'day'" language="he"></datepicker>
193201
<code>
194-
&lt;datepicker :day-view-only="true"&gt;&lt;/datepicker&gt;
202+
&lt;datepicker :minimumView="'day'" :maximumView="'day'" language="he"&gt;&lt;/datepicker&gt;
195203
</code>
196204
</div>
197205

198206
<div class="example">
199-
<h3>Day view only</h3>
200-
<datepicker :day-view-only="true"></datepicker>
207+
<h3>Month view only</h3>
208+
<datepicker :minimumView="'month'" :maximumView="'month'"></datepicker>
209+
<code>
210+
&lt;datepicker :minimumView="'month'" :maximumView="'month'"&gt;&lt;/datepicker&gt;
211+
</code>
212+
</div>
213+
214+
<div class="example">
215+
<h3>Day and month view only</h3>
216+
<datepicker :minimumView="'day'" :maximumView="'month'" :initialView="'month'"></datepicker>
217+
<code>
218+
&lt;datepicker :minimumView="'day'" :maximumView="'month'" :initialView="'month'"&gt;&lt;/datepicker&gt;
219+
</code>
220+
</div>
221+
222+
<div class="example">
223+
<h3>Year and month view only</h3>
224+
<datepicker :minimumView="'month'" :maximumView="'year'" :initialView="'year'"></datepicker>
201225
<code>
202-
&lt;datepicker :day-view-only="true"&gt;&lt;/datepicker&gt;
226+
&lt;datepicker :minimumView="'month'" :maximumView="'year'" :initialView="'year'"&gt;&lt;/datepicker&gt;
203227
</code>
204228
</div>
205229

‎src/components/Datepicker.vue‎

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

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

5860
<!-- Month View -->
59-
<template v-if="!dayViewOnly">
61+
<template v-if="allowedToShowView('month')">
6062
<div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showMonthView" v-bind:style="calendarStyle">
6163
<header>
6264
<span
6365
@click="previousYear"
6466
class="prev"
6567
v-bind:class="{ 'disabled' : previousYearDisabled(pageTimestamp) }">&lt;</span>
66-
<span @click="showYearCalendar" class="up">{{ getPageYear() }}</span>
68+
<span @click="showYearCalendar" :class="allowedToShowView('year') ? 'up' : ''">{{ getPageYear() }}</span>
6769
<span
6870
@click="nextYear"
6971
class="next"
@@ -79,7 +81,7 @@
7981
</template>
8082

8183
<!-- Year View -->
82-
<template v-if="!dayViewOnly">
84+
<template v-if="allowedToShowView('year')">
8385
<div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showYearView" v-bind:style="calendarStyle">
8486
<header>
8587
<span @click="previousDecade" class="prev"
@@ -140,13 +142,17 @@ export default {
140142
calendarButton: Boolean,
141143
calendarButtonIcon: String,
142144
bootstrapStyling: Boolean,
143-
initialView: {
145+
initialView: String,
146+
disabledPicker: Boolean,
147+
required: Boolean,
148+
minimumView: {
144149
type: String,
145150
default: 'day'
146151
},
147-
disabledPicker: Boolean,
148-
required: Boolean,
149-
dayViewOnly: Boolean
152+
maximumView: {
153+
type: String,
154+
default: 'year'
155+
}
150156
},
151157
data () {
152158
const startDate = this.openDate ? new Date(this.openDate) : new Date()
@@ -187,6 +193,13 @@ export default {
187193
}
188194
},
189195
computed: {
196+
computedInitialView () {
197+
if (!this.initialView) {
198+
return this.minimumView
199+
}
200+
201+
return this.initialView
202+
},
190203
pageDate () {
191204
return new Date(this.pageTimestamp)
192205
},
@@ -331,9 +344,18 @@ export default {
331344
return this.close()
332345
}
333346
this.setInitialView()
347+
if (!this.isInline) {
348+
this.$emit('opened')
349+
}
334350
},
335351
setInitialView () {
336-
switch (this.initialView) {
352+
const initialView = this.computedInitialView
353+
354+
if (!this.allowedToShowView(initialView)) {
355+
throw new Error(`initialView '${this.initialView}' cannot be rendered based on minimum '${this.minimumView}' and maximum '${this.maximumView}'`)
356+
}
357+
358+
switch (initialView) {
337359
case 'year':
338360
this.showYearCalendar()
339361
break
@@ -345,23 +367,35 @@ export default {
345367
break
346368
}
347369
},
370+
allowedToShowView (view) {
371+
const views = ['day', 'month', 'year']
372+
const minimumViewIndex = views.indexOf(this.minimumView)
373+
const maximumViewIndex = views.indexOf(this.maximumView)
374+
const viewIndex = views.indexOf(view)
375+
376+
return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex
377+
},
348378
showDayCalendar () {
379+
if (!this.allowedToShowView('day')) return false
380+
349381
this.close()
350382
this.showDayView = true
351383
if (!this.isInline) {
352-
this.$emit('opened')
353384
document.addEventListener('click', this.clickOutside, false)
354385
}
355386
},
356387
showMonthCalendar () {
357-
if (this.dayViewOnly) return false
388+
if (!this.allowedToShowView('month')) return false
389+
358390
this.close()
359391
this.showMonthView = true
360392
if (!this.isInline) {
361393
document.addEventListener('click', this.clickOutside, false)
362394
}
363395
},
364396
showYearCalendar () {
397+
if (!this.allowedToShowView('year')) return false
398+
365399
this.close()
366400
this.showYearView = true
367401
if (!this.isInline) {
@@ -391,9 +425,10 @@ export default {
391425
}
392426
this.setDate(day.timestamp)
393427
if (this.isInline) {
394-
return this.showDayCalendar()
428+
this.showDayCalendar()
429+
} else {
430+
this.close()
395431
}
396-
this.close()
397432
},
398433
/**
399434
* @param {Object} month
@@ -402,10 +437,16 @@ export default {
402437
if (month.isDisabled) {
403438
return false
404439
}
440+
405441
const date = new Date(month.timestamp)
406-
this.setPageDate(date)
407-
this.showDayCalendar()
408-
this.$emit('changedMonth', month)
442+
if (this.allowedToShowView('day')) {
443+
this.setPageDate(date)
444+
this.$emit('changedMonth', month)
445+
this.showDayCalendar()
446+
} else {
447+
this.setDate(date)
448+
this.close()
449+
}
409450
},
410451
/**
411452
* @param {Object} year
@@ -414,10 +455,16 @@ export default {
414455
if (year.isDisabled) {
415456
return false
416457
}
458+
417459
const date = new Date(year.timestamp)
418-
this.setPageDate(date)
419-
this.showMonthCalendar()
420-
this.$emit('changedYear', year)
460+
if (this.allowedToShowView('month')) {
461+
this.setPageDate(date)
462+
this.$emit('changedYear', year)
463+
this.showMonthCalendar()
464+
} else {
465+
this.setDate(date)
466+
this.close()
467+
}
421468
},
422469
/**
423470
* @return {Number}

‎src/utils/DateLanguages.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,22 @@ export default {
282282
},
283283
'days': ['Ned', 'Pon', 'Tor', 'Sre', 'Čet', 'Pet', 'Sob']
284284
},
285+
'sr': {
286+
'language': 'Serbian',
287+
'months': {
288+
'original': ['Januar', 'Februar', 'Mart', 'April', 'Maj', 'Jun', 'Jul', 'Avgust', 'Septembar', 'Oktobar', 'Novembar', 'Decembar'],
289+
'abbr': ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Avg', 'Sep', 'Okt', 'Nov', 'Dec']
290+
},
291+
'days': ['Ned', 'Pon', 'Uto', 'Sre', 'Čet', 'Pet', 'Sub']
292+
},
293+
'sr-Cyrl': {
294+
'language': 'Serbian in Cyrillic script',
295+
'months': {
296+
'original': ['Јануар', 'Фебруар', 'Март', 'Април', 'Мај', 'Јун', 'Јул', 'Август', 'Септембар', 'Октобар', 'Новембар', 'Децембар'],
297+
'abbr': ['Јан', 'Феб', 'Мар', 'Апр', 'Мај', 'Јун', 'Јул', 'Авг', 'Сеп', 'Окт', 'Нов', 'Дец']
298+
},
299+
'days': ['Нед', 'Пон', 'Уто', 'Сре', 'Чет', 'Пет', 'Суб']
300+
},
285301
'th': {
286302
'language': 'Thai',
287303
'months': {

0 commit comments

Comments
 (0)