Skip to content

Commit

Permalink
Merge pull request charliekassel#327 from b12f/master
Browse files Browse the repository at this point in the history 
Allow setting minimum and maximum view
  • Loading branch information
@charliekassel
charliekassel authored Nov 4, 2017
2 parents cc79c74 + edecf70 commit 842318f
Show file tree
Hide file tree
Showing 4 changed files with 202 additions and 70 deletions.
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,11 @@ Inline always open version
| calendar-button | Boolean | false | Show an icon that that can be clicked |
| calendar-button-icon | String | | Use icon for button (ex: fa fa-calendar) |
| bootstrapStyling | Boolean | false | Output bootstrap styling classes |
| initial-view | String | 'day' | If 'month' or 'year', open on that view |
| initial-view | String | minimumView | If set, open on that view |
| disabled-picker | Boolean | false | If true, disable Datepicker on screen |
| required | Boolean | false | Sets html required attribute on input |
| day-view-only | Boolean | false | If true, month and year views won't show |
| minimum-view | String | 'day' | If set, lower-level views won't show |
| maximum-view | String | 'year' | If set, higher-level views won't show |

## Events

Expand Down
38 changes: 31 additions & 7 deletions src/Demo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@
<div class="settings">
<h5>Settings</h5>
<select v-model="language">
<option :value="key" v-for="(language, key) in languages">{{ language.language }}</option>
<option :value="key" v-for="(language, key) in languages" :key="key">{{ language.language }}</option>
</select>
</div>
</div>
Expand All @@ -167,23 +167,47 @@
<h3>RTL datepicker</h3>
<datepicker language="he"></datepicker>
<code>
&lt;datepicker :inline="true"&gt;&lt;/datepicker&gt;
&lt;datepicker language="he"&gt;&lt;/datepicker&gt;
</code>
</div>

<div class="example">
<h3>Day view only</h3>
<datepicker :minimumView="'day'" :maximumView="'day'"></datepicker>
<code>
&lt;datepicker :minimumView="'day'" :maximumView="'day'"&gt;&lt;/datepicker&gt;
</code>
</div>

<div class="example">
<h3>Day view only RTL</h3>
<datepicker :day-view-only="true" language="he"></datepicker>
<datepicker :minimumView="'day'" :maximumView="'day'" language="he"></datepicker>
<code>
&lt;datepicker :day-view-only="true"&gt;&lt;/datepicker&gt;
&lt;datepicker :minimumView="'day'" :maximumView="'day'" language="he"&gt;&lt;/datepicker&gt;
</code>
</div>

<div class="example">
<h3>Day view only</h3>
<datepicker :day-view-only="true"></datepicker>
<h3>Month view only</h3>
<datepicker :minimumView="'month'" :maximumView="'month'"></datepicker>
<code>
&lt;datepicker :minimumView="'month'" :maximumView="'month'"&gt;&lt;/datepicker&gt;
</code>
</div>

<div class="example">
<h3>Day and month view only</h3>
<datepicker :minimumView="'day'" :maximumView="'month'" :initialView="'month'"></datepicker>
<code>
&lt;datepicker :minimumView="'day'" :maximumView="'month'" :initialView="'month'"&gt;&lt;/datepicker&gt;
</code>
</div>

<div class="example">
<h3>Year and month view only</h3>
<datepicker :minimumView="'month'" :maximumView="'year'" :initialView="'year'"></datepicker>
<code>
&lt;datepicker :day-view-only="true"&gt;&lt;/datepicker&gt;
&lt;datepicker :minimumView="'month'" :maximumView="'year'" :initialView="'year'"&gt;&lt;/datepicker&gt;
</code>
</div>

Expand Down
131 changes: 89 additions & 42 deletions src/components/Datepicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,40 +29,42 @@
</div>

<!-- Day View -->
<div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" v-bind:style="calendarStyle">
<header>
<span
@click="isRtl ? nextMonth() : previousMonth()"
class="prev"
v-bind:class="{ 'disabled' : isRtl ? nextMonthDisabled(pageTimestamp) : previousMonthDisabled(pageTimestamp) }">&lt;</span>
<span @click="showMonthCalendar" :class="!dayViewOnly ? 'up' : ''">{{ currMonthName }} {{ currYear }}
</span>
<span
@click="isRtl ? previousMonth() : nextMonth()"
class="next"
v-bind:class="{ 'disabled' : isRtl ? previousMonthDisabled(pageTimestamp) : nextMonthDisabled(pageTimestamp) }">&gt;</span>
</header>
<div :class="isRtl ? 'flex-rtl' : ''">
<span class="cell day-header" v-for="d in daysOfWeek" :key="d.timestamp">{{ d }}</span>
<span class="cell day blank" v-for="d in blankDays" :key="d.timestamp"></span><!--
--><span class="cell day"
v-for="day in days"
:key="day.timestamp"
track-by="timestamp"
v-bind:class="dayClasses(day)"
@click="selectDate(day)">{{ day.date }}</span>
</div>
</div>
<template v-if="allowedToShowView('day')">
<div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" v-bind:style="calendarStyle">
<header>
<span
@click="isRtl ? nextMonth() : previousMonth()"
class="prev"
v-bind:class="{ 'disabled' : isRtl ? nextMonthDisabled(pageTimestamp) : previousMonthDisabled(pageTimestamp) }">&lt;</span>
<span @click="showMonthCalendar" :class="allowedToShowView('month') ? 'up' : ''">{{ currMonthName }} {{ currYear }}
</span>
<span
@click="isRtl ? previousMonth() : nextMonth()"
class="next"
v-bind:class="{ 'disabled' : isRtl ? previousMonthDisabled(pageTimestamp) : nextMonthDisabled(pageTimestamp) }">&gt;</span>
</header>
<div :class="isRtl ? 'flex-rtl' : ''">
<span class="cell day-header" v-for="d in daysOfWeek" :key="d.timestamp">{{ d }}</span>
<span class="cell day blank" v-for="d in blankDays" :key="d.timestamp"></span><!--
--><span class="cell day"
v-for="day in days"
:key="day.timestamp"
track-by="timestamp"
v-bind:class="dayClasses(day)"
@click="selectDate(day)">{{ day.date }}</span>
</div>
</div>
</template>

<!-- Month View -->
<template v-if="!dayViewOnly">
<template v-if="allowedToShowView('month')">
<div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showMonthView" v-bind:style="calendarStyle">
<header>
<span
@click="previousYear"
class="prev"
v-bind:class="{ 'disabled' : previousYearDisabled(pageTimestamp) }">&lt;</span>
<span @click="showYearCalendar" class="up">{{ getPageYear() }}</span>
<span @click="showYearCalendar" :class="allowedToShowView('year') ? 'up' : ''">{{ getPageYear() }}</span>
<span
@click="nextYear"
class="next"
Expand All @@ -78,7 +80,7 @@
</template>

<!-- Year View -->
<template v-if="!dayViewOnly">
<template v-if="allowedToShowView('year')">
<div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showYearView" v-bind:style="calendarStyle">
<header>
<span @click="previousDecade" class="prev"
Expand Down Expand Up @@ -134,13 +136,17 @@ export default {
calendarButton: Boolean,
calendarButtonIcon: String,
bootstrapStyling: Boolean,
initialView: {
initialView: String,
disabledPicker: Boolean,
required: Boolean,
minimumView: {
type: String,
default: 'day'
},
disabledPicker: Boolean,
required: Boolean,
dayViewOnly: Boolean
maximumView: {
type: String,
default: 'year'
}
},
data () {
return {
Expand Down Expand Up @@ -177,6 +183,13 @@ export default {
}
},
computed: {
computedInitialView () {
if (!this.initialView) {
return this.minimumView
}
return this.initialView
},
pageDate () {
return new Date(this.pageTimestamp)
},
Expand Down Expand Up @@ -321,9 +334,18 @@ export default {
return this.close()
}
this.setInitialView()
if (!this.isInline) {
this.$emit('opened')
}
},
setInitialView () {
switch (this.initialView) {
const initialView = this.computedInitialView
if (!this.allowedToShowView(initialView)) {
throw new Error(`initialView '${this.initialView}' cannot be rendered based on minimum '${this.minimumView}' and maximum '${this.maximumView}'`)
}
switch (initialView) {
case 'year':
this.showYearCalendar()
break
Expand All @@ -335,23 +357,35 @@ export default {
break
}
},
allowedToShowView (view) {
const views = ['day', 'month', 'year']
const minimumViewIndex = views.indexOf(this.minimumView)
const maximumViewIndex = views.indexOf(this.maximumView)
const viewIndex = views.indexOf(view)
return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex
},
showDayCalendar () {
if (!this.allowedToShowView('day')) return false
this.close()
this.showDayView = true
if (!this.isInline) {
this.$emit('opened')
document.addEventListener('click', this.clickOutside, false)
}
},
showMonthCalendar () {
if (this.dayViewOnly) return false
if (!this.allowedToShowView('month')) return false
this.close()
this.showMonthView = true
if (!this.isInline) {
document.addEventListener('click', this.clickOutside, false)
}
},
showYearCalendar () {
if (!this.allowedToShowView('year')) return false
this.close()
this.showYearView = true
if (!this.isInline) {
Expand Down Expand Up @@ -381,9 +415,10 @@ export default {
}
this.setDate(day.timestamp)
if (this.isInline) {
return this.showDayCalendar()
this.showDayCalendar()
} else {
this.close()
}
this.close()
},
/**
* @param {Object} month
Expand All @@ -392,10 +427,16 @@ export default {
if (month.isDisabled) {
return false
}
const date = new Date(month.timestamp)
this.setPageDate(date)
this.showDayCalendar()
this.$emit('changedMonth', month)
if (this.allowedToShowView('day')) {
this.setPageDate(date)
this.$emit('changedMonth', month)
this.showDayCalendar()
} else {
this.setDate(date)
this.close()
}
},
/**
* @param {Object} year
Expand All @@ -404,10 +445,16 @@ export default {
if (year.isDisabled) {
return false
}
const date = new Date(year.timestamp)
this.setPageDate(date)
this.showMonthCalendar()
this.$emit('changedYear', year)
if (this.allowedToShowView('month')) {
this.setPageDate(date)
this.$emit('changedYear', year)
this.showMonthCalendar()
} else {
this.setDate(date)
this.close()
}
},
/**
* @return {Number}
Expand Down
Loading

0 comments on commit 842318f

Please sign in to comment.