feat(pickeryear): add yearPickerRange prop

* feat(pickeryear): add yearPickerRange prop

* docs(props): document new year-picker-range

* test(props): add test for year-picker-range prop

* refactor(props): rename yearPickerRange internaly to year-range

* doc(yearrange): set correct settings headline

* docs(project): resolve doc naming issues

docs/.vuepress/components/Demo.vue

@@ -134,6 +134,24 @@
  <datepicker :calendar-button="true" :show-calendar-on-button-click="true"></datepicker>
  </code>
  </div>
+
+ <div class="example">
+ <h3>Year picker range</h3>
+ <Datepicker
+ :year-picker-range="yearPickerRange"
+ />
+ <code>
+ &lt;datepicker :year-picker-range="yearPickerRange"&gt;&lt;/datepicker&gt;
+ </code>
+ <div class="settings">
+ <h5>Settings</h5>
+ <div class="form-group">
+ <label>Year picker range:</label>
+ <input v-model="yearPickerRange" type="number"/>
+ </div>
+ <pre>yearPickerRange: {{ yearPickerRange }}</pre>
+ </div>
+ </div>
  </div>
 </template>
 
@@ -146,6 +164,7 @@ export default {
  format: 'd MMMM yyyy',
  openDate: null,
  vModelExample: null,
+ yearPickerRange: 10
  }
  },
 }

docs/guide/Props/README.md

@@ -40,3 +40,4 @@
 | use-utc | Boolean | false | Use UTC for time calculations |
 | value | Date\|String | | Date value of the datepicker |
 | wrapper-class | String\|Object | | CSS class applied to the outer div |
+| year-picker-range | Number | 10 | Amount of years inside the year picker |

example/Demo.vue

@@ -68,11 +68,11 @@
  <option value="yyyy-MM-dd">
  yyyy-MM-dd - e.g 2016-02-12
  </option>
- <option value="dsu MMM yyyy">
- dsu MMM yyyy - e.g 12th Feb 2016
+ <option value="do MMM yyyy">
+ do MMM yyyy - e.g 12th Feb 2016
  </option>
- <option value="D dsu MMM yyyy">
- D dsu MMM yyyy - e.g Sat 12th Feb 2016
+ <option value="E do MMM yyyy">
+ E do MMM yyyy - e.g Sat 12th Feb 2016
  </option>
  </select>
  </div>
@@ -294,6 +294,27 @@
  initial-view="year"&gt;&lt;/datepicker&gt;
  </code>
  </div>
+
+ <div class="example">
+ <h3>Year picker range</h3>
+ <Datepicker
+ :year-picker-range="yearPickerRange"
+ />
+ <code>
+ &lt;datepicker :year-picker-range="yearPickerRange"&gt;&lt;/datepicker&gt;
+ </code>
+ <div class="settings">
+ <h5>Settings</h5>
+ <div class="form-group">
+ <label>Year picker range:</label>
+ <input
+ v-model="yearPickerRange"
+ type="number"
+ >
+ </div>
+ <pre>yearPickerRange: {{ yearPickerRange }}</pre>
+ </div>
+ </div>
  </div>
 </template>
 
@@ -370,6 +391,7 @@ export default {
  vModelExample: null,
  languages: lang,
  language: 'en',
+ yearPickerRange: 10,
  }
  },
  computed: {

src/components/Datepicker.vue

@@ -71,6 +71,7 @@
  :show-header="showHeader"
  :translation="translation"
  :use-utc="useUtc"
+ :year-range="yearPickerRange"
 
  @select-date="selectDate"
  @changed-month="handleChangedMonthFromDayPicker"
@@ -229,6 +230,10 @@ export default {
  ],
  default: '',
  },
+ yearPickerRange: {
+ type: Number,
+ default: 10,
+ },
  },
  data() {
  // const startDate = this.openDate ? new Date(this.openDate) : new Date()

src/components/PickerYear.vue

@@ -40,6 +40,12 @@ export default {
  mixins: [
  pickerMixin,
  ],
+ props: {
+ yearRange: {
+ type: Number,
+ default: 10,
+ },
+ },
  computed: {
  /**
  * Checks if the next decade is disabled or not
@@ -49,8 +55,11 @@ export default {
  if (!this.disabledDates || !this.disabledDates.from) {
  return false
  }
- return Math.ceil(this.utils.getFullYear(this.disabledDates.from) / 10) * 10
- <= Math.ceil(this.utils.getFullYear(this.pageDate) / 10) * 10
+ const yearFrom = this.utils.getFullYear(this.disabledDates.from)
+ const yearPageDate = this.utils.getFullYear(this.pageDate)
+
+ return Math.ceil(yearFrom / this.yearRange) * this.yearRange
+ <= Math.ceil(yearPageDate / this.yearRange) * this.yearRange
  },
  /**
  * Checks if the previous decade is disabled or not
@@ -60,16 +69,21 @@ export default {
  if (!this.disabledDates || !this.disabledDates.to) {
  return false
  }
- return Math.floor(this.utils.getFullYear(this.disabledDates.to) / 10) * 10
- >= Math.floor(this.utils.getFullYear(this.pageDate) / 10) * 10
+ const yearTo = this.utils.getFullYear(this.disabledDates.to)
+ const yearPageDate = this.utils.getFullYear(this.pageDate)
+
+ return Math.floor(yearTo / this.yearRange) * this.yearRange
+ >= Math.floor(yearPageDate / this.yearRange) * this.yearRange
  },
  /**
  * Get decade name on current page.
  * @return {String}
  */
  getPageDecade() {
- const decadeStart = Math.floor(this.utils.getFullYear(this.pageDate) / 10) * 10
- const decadeEnd = decadeStart + 9
+ const yearPageDate = this.utils.getFullYear(this.pageDate)
+
+ const decadeStart = Math.floor(yearPageDate / this.yearRange) * this.yearRange
+ const decadeEnd = decadeStart + (this.yearRange - 1)
  const { yearSuffix } = this.translation
  return `${decadeStart} - ${decadeEnd}${yearSuffix}`
  },
@@ -80,17 +94,20 @@ export default {
  years() {
  const d = this.pageDate
  const years = []
+
+ const year = this.useUtc
+ ? Math.floor(d.getUTCFullYear() / this.yearRange) * this.yearRange
+ : Math.floor(d.getFullYear() / this.yearRange) * this.yearRange
+
  // set up a new date object to the beginning of the current 'page'7
  const dObj = this.useUtc
  ? new Date(
- Date.UTC(Math.floor(d.getUTCFullYear() / 10) * 10, d.getUTCMonth(), d.getUTCDate()),
+ Date.UTC(year, d.getUTCMonth(), d.getUTCDate()),
  )
  : new Date(
- Math.floor(
- d.getFullYear() / 10,
- ) * 10, d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(),
+ year, d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(),
  )
- for (let i = 0; i < 10; i += 1) {
+ for (let i = 0; i < this.yearRange; i += 1) {
  years.push({
  year: this.utils.getFullYear(dObj),
  timestamp: dObj.valueOf(),
@@ -134,15 +151,15 @@ export default {
  */
  nextDecade() {
  if (!this.isNextDisabled) {
- this.changeYear(10)
+ this.changeYear(this.yearRange)
  }
  },
  /**
  * Decrements the decade
  */
  previousDecade() {
  if (!this.isPreviousDisabled) {
- this.changeYear(-10)
+ this.changeYear(-this.yearRange)
  }
  },
  /**

test/unit/specs/PickerYear/pickerYear.spec.js

@@ -53,4 +53,14 @@ describe('PickerYear', () => {
  wrapper.vm.selectYear({ isDisabled: false })
  expect(wrapper.emitted()['select-year']).toBeTruthy()
  })
+
+ it('should set custom decade range', () => {
+ wrapper.setProps({
+ pageDate: new Date(2021, 1, 1),
+ yearRange: 12,
+ })
+ expect(wrapper.vm.getPageDecade).toEqual('2016 - 2027')
+ expect(wrapper.vm.$el.querySelectorAll('.cell.year').length)
+ .toEqual(12)
+ })
 })