Merge branch 'master' into patch-1

Author: tobischulz

README.md

@@ -83,10 +83,11 @@ Inline always open version
 | calendar-button-icon          | String          |             | Use icon for button (ex: fa fa-calendar) |
 | calendar-button-icon-content  | String          |             | Use for material-icons (ex: event)       |
 | 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
 
@@ -264,6 +265,8 @@ Available languages
 | sk          | Slovak           |          |
 | sl-si       | Slovenian        |          |
 | sv          | Swedish          |          |
+| sr          | Serbian (Latin)  |          |
+| sr-Cyrl     | Serbian (Cyrl)   |          |
 | th          | Thai             |          |
 | tr          | Turkish          |          |
 | uk          | Ukrainian        |          |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuejs-datepicker",
-  "version": "0.9.18",
+  "version": "0.9.19",
   "description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations",
   "keywords": [
     "vue",

src/Demo.vue

@@ -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>
@@ -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>
 

src/components/Datepicker.vue

@@ -30,40 +30,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"
@@ -79,7 +81,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"
@@ -136,13 +138,17 @@ export default {
     calendarButtonIcon: String,
     calendarButtonIconContent: 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 {
@@ -179,6 +185,13 @@ export default {
     }
   },
   computed: {
+    computedInitialView () {
+      if (!this.initialView) {
+        return this.minimumView
+      }
+
+      return this.initialView
+    },
     pageDate () {
       return new Date(this.pageTimestamp)
     },
@@ -323,9 +336,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
@@ -337,23 +359,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) {
@@ -383,9 +417,10 @@ export default {
       }
       this.setDate(day.timestamp)
       if (this.isInline) {
-        return this.showDayCalendar()
+        this.showDayCalendar()
+      } else {
+        this.close()
       }
-      this.close()
     },
     /**
      * @param {Object} month
@@ -394,10 +429,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
@@ -406,10 +447,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}

src/utils/DateLanguages.js

@@ -262,7 +262,7 @@ export default {
       'language': 'Swedish',
       'months': {
         'original': ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
-        'abbr': ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+        'abbr': ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
       },
       'days': ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör']
     },
@@ -282,6 +282,22 @@ export default {
       },
       'days': ['Ned', 'Pon', 'Tor', 'Sre', 'Čet', 'Pet', 'Sob']
     },
+    'sr': {
+      'language': 'Serbian',
+      'months': {
+        'original': ['Januar', 'Februar', 'Mart', 'April', 'Maj', 'Jun', 'Jul', 'Avgust', 'Septembar', 'Oktobar', 'Novembar', 'Decembar'],
+        'abbr': ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Avg', 'Sep', 'Okt', 'Nov', 'Dec']
+      },
+      'days': ['Ned', 'Pon', 'Uto', 'Sre', 'Čet', 'Pet', 'Sub']
+    },
+    'sr-Cyrl': {
+      'language': 'Serbian in Cyrillic script',
+      'months': {
+        'original': ['Јануар', 'Фебруар', 'Март', 'Април', 'Мај', 'Јун', 'Јул', 'Август', 'Септембар', 'Октобар', 'Новембар', 'Децембар'],
+        'abbr': ['Јан', 'Феб', 'Мар', 'Апр', 'Мај', 'Јун', 'Јул', 'Авг', 'Сеп', 'Окт', 'Нов', 'Дец']
+      },
+      'days': ['Нед', 'Пон', 'Уто', 'Сре', 'Чет', 'Пет', 'Суб']
+    },
     'th': {
       'language': 'Thai',
       'months': {