feat (v-date-picker): reactive prop

src/components/VDatePicker/VDatePicker.date.spec.js

@@ -40,32 +40,21 @@ test('VDatePicker.js', ({ mount, compileToFunctions }) => {
  })
 
  it('should emit input event on date click', async () => {
- const cb = jest.fn()
  const wrapper = mount(VDatePicker, {
  propsData: {
  value: '2013-05-07'
  }
  })
 
- wrapper.vm.$on('input', cb);
- wrapper.find('.date-picker-table--date tbody tr+tr td:first-child button')[0].trigger('click')
- expect(cb).toBeCalledWith('2013-05-05')
- })
+ const input = jest.fn()
+ wrapper.vm.$on('input', input)
 
- it('should emit input event on month click', async () => {
- const cb = jest.fn()
- const wrapper = mount(VDatePicker, {
- propsData: {
- value: '2013-05-13'
- },
- data: {
- activePicker: 'MONTH'
- }
- })
+ const change = jest.fn()
+ wrapper.vm.$on('change', change)
 
- wrapper.vm.$on('input', cb);
- wrapper.find('.date-picker-table--month button')[0].trigger('click')
- expect(cb).toBeCalledWith('2013-01-13')
+ wrapper.find('.date-picker-table--date tbody tr+tr td:first-child button')[0].trigger('click')
+ expect(input).toBeCalledWith('2013-05-05')
+ expect(change).toBeCalledWith('2013-05-05')
  })
 
  it('should not emit input event on month click if date is not allowed', async () => {
@@ -85,20 +74,26 @@ test('VDatePicker.js', ({ mount, compileToFunctions }) => {
  expect(cb).not.toBeCalled()
  })
 
- it('should emit input event on year click', async () => {
- const cb = jest.fn()
+ it('should emit input event on year click (reactive picker)', async () => {
  const wrapper = mount(VDatePicker, {
  propsData: {
- value: '2013-05-13'
+ value: '2013-05-13',
+ reactive: true
  },
  data: {
  activePicker: 'YEAR'
  }
  })
 
- wrapper.vm.$on('input', cb);
+ const input = jest.fn()
+ wrapper.vm.$on('input', input);
+
+ const change = jest.fn()
+ wrapper.vm.$on('change', input);
+
  wrapper.find('.date-picker-years li.active + li')[0].trigger('click')
- expect(cb).toBeCalledWith('2012-05-13')
+ expect(input).toBeCalledWith('2012-05-13')
+ expect(change).not.toBeCalled()
  })
 
  it('should not emit input event on year click if date is not allowed', async () => {
@@ -332,21 +327,6 @@ test('VDatePicker.js', ({ mount, compileToFunctions }) => {
  expect(wrapper.vm.tableDate).toBe('2004-11')
  })
 
- it('should calculate the first allowed date', () => {
- const now = new Date()
- const year = now.getFullYear()
- const month = now.getMonth()
- const date = now.getDate()
-
- const wrapper2 = mount(VDatePicker, {
- propsData: {
- value: null,
- allowedDates: value => value === `${year}-${(month < 9 ? '0' : '') + (month + 1)}-03`
- }
- })
- expect(wrapper2.vm.inputDate).toBe(`${year}-${(month < 9 ? '0' : '') + (month + 1)}-03`)
- })
-
  it('should set the table date when value has changed', () => {
  const wrapper = mount(VDatePicker, {
  propsData: {
@@ -451,4 +431,49 @@ test('VDatePicker.js', ({ mount, compileToFunctions }) => {
  await wrapper.vm.$nextTick()
  expect(wrapper.html()).toMatchSnapshot()
  })
+
+ it('should emit @input and not emit @change when month is clicked (not reative picker)', async () => {
+ const wrapper = mount(VDatePicker, {
+ propsData: {
+ value: '2013-02-07',
+ reactive: true
+ },
+ data: {
+ activePicker: 'MONTH'
+ }
+ })
+
+ const input = jest.fn()
+ wrapper.vm.$on('input', input)
+
+ const change = jest.fn()
+ wrapper.vm.$on('change', change)
+
+ wrapper.find('tbody tr td button')[0].trigger('click')
+ wrapper.vm.$nextTick()
+ expect(change).not.toBeCalled()
+ expect(input).toBeCalledWith('2013-01-07')
+ })
+
+ it('should not emit @input and not emit @change when month is clicked (lazy picker)', async () => {
+ const wrapper = mount(VDatePicker, {
+ propsData: {
+ value: '2013-02-07'
+ },
+ data: {
+ activePicker: 'MONTH'
+ }
+ })
+
+ const input = jest.fn()
+ wrapper.vm.$on('input', input)
+
+ const change = jest.fn()
+ wrapper.vm.$on('change', change)
+
+ wrapper.find('tbody tr td button')[0].trigger('click')
+ wrapper.vm.$nextTick()
+ expect(change).not.toBeCalled()
+ expect(input).not.toBeCalled()
+ })
 })

src/components/VDatePicker/VDatePicker.js

@@ -36,6 +36,9 @@ export default {
  return {
  activePicker: this.type.toUpperCase(),
  defaultColor: 'accent',
+ inputDay: null,
+ inputMonth: null,
+ inputYear: null,
  isReversing: false,
  now,
  // tableDate is a string in 'YYYY' / 'YYYY-M' format (leading zero for month is not required)
@@ -95,6 +98,7 @@ export default {
  type: String,
  default: 'chevron_left'
  },
+ reactive: Boolean,
  readonly: Boolean,
  scrollable: Boolean,
  showCurrent: {
@@ -128,62 +132,10 @@ export default {
 
  return this.showCurrent || null
  },
- firstAllowedDate () {
- const year = this.now.getFullYear()
- const month = this.now.getMonth()
-
- if (this.allowedDates) {
- for (let date = 1; date <= 31; date++) {
- const dateString = `${year}-${month + 1}-${date}`
- if (isNaN(new Date(dateString).getDate())) break
-
- const sanitizedDateString = this.sanitizeDateString(dateString, 'date')
- if (this.isDateAllowed(sanitizedDateString)) {
- return sanitizedDateString
- }
- }
- }
-
- return this.sanitizeDateString(`${year}-${month + 1}-${this.now.getDate()}`, 'date')
- },
- firstAllowedMonth () {
- const year = this.now.getFullYear()
-
- if (this.allowedDates) {
- for (let month = 0; month < 12; month++) {
- const dateString = `${year}-${pad(month + 1)}`
- if (this.isDateAllowed(dateString)) {
- return dateString
- }
- }
- }
-
- return `${year}-${pad(this.now.getMonth() + 1)}`
- },
- // inputDate MUST be a string in ISO 8601 format (including leading zero for month/day)
- // YYYY-MM for month picker
- // YYYY-MM-DD for date picker
- inputDate: {
- get () {
- if (this.value) {
- return this.sanitizeDateString(this.value, this.type)
- }
-
- return this.type === 'month' ? this.firstAllowedMonth : this.firstAllowedDate
- },
- set (value) {
- const date = value ? this.sanitizeDateString(value, this.type) : null
- this.$emit('input', date)
- }
- },
- day () {
- return this.inputDate.split('-')[2] * 1
- },
- month () {
- return this.inputDate.split('-')[1] - 1
- },
- year () {
- return this.inputDate.split('-')[0] * 1
+ inputDate () {
+ return this.type === 'date'
+ ? `${this.inputYear}-${pad(this.inputMonth + 1)}-${pad(this.inputDay)}`
+ : `${this.inputYear}-${pad(this.inputMonth + 1)}`
  },
  tableMonth () {
  return (this.pickerDate || this.tableDate).split('-')[1] - 1
@@ -247,8 +199,9 @@ export default {
  }
  },
  value () {
+ this.setInputDate()
  if (this.value && !this.pickerDate) {
- this.tableDate = this.type === 'month' ? `${this.year}` : `${this.year}-${pad(this.month + 1)}`
+ this.tableDate = this.sanitizeDateString(this.inputDate, this.type === 'month' ? 'year' : 'month')
  }
  },
  type (type) {
@@ -266,39 +219,40 @@ export default {
  return isDateAllowed(value, this.min, this.max, this.allowedDates)
  },
  yearClick (value) {
+ this.inputYear = value
  if (this.type === 'month') {
- const date = `${value}-${pad(this.month + 1)}`
- if (this.isDateAllowed(date)) this.inputDate = date
  this.tableDate = `${value}`
  } else {
- const date = `${value}-${pad(this.tableMonth + 1)}-${pad(this.day)}`
- if (this.isDateAllowed(date)) this.inputDate = date
  this.tableDate = `${value}-${pad(this.tableMonth + 1)}`
  }
  this.activePicker = 'MONTH'
+ this.reactive && this.isDateAllowed(this.inputDate) && this.$emit('input', this.inputDate)
  },
  monthClick (value) {
- // Updates inputDate setting 'YYYY-MM' or 'YYYY-MM-DD' format, depending on the picker type
+ this.inputYear = parseInt(value.split('-')[0], 10)
+ this.inputMonth = parseInt(value.split('-')[1], 10) - 1
  if (this.type === 'date') {
- const date = `${value}-${pad(this.day)}`
- if (this.isDateAllowed(date)) this.inputDate = date
  this.tableDate = value
  this.activePicker = 'DATE'
+ this.reactive && this.isDateAllowed(this.inputDate) && this.$emit('input', this.inputDate)
  } else {
- this.inputDate = value
- this.$emit('change', value)
+ this.$emit('input', this.inputDate)
+ this.$emit('change', this.inputDate)
  }
  },
  dateClick (value) {
- this.inputDate = value
- this.$emit('change', value)
+ this.inputYear = parseInt(value.split('-')[0], 10)
+ this.inputMonth = parseInt(value.split('-')[1], 10) - 1
+ this.inputDay = parseInt(value.split('-')[2], 10)
+ this.$emit('input', this.inputDate)
+ this.$emit('change', this.inputDate)
  },
  genPickerTitle () {
  return this.$createElement('v-date-picker-title', {
  props: {
- date: this.formatters.titleDate(this.inputDate),
+ date: this.value ? this.formatters.titleDate(this.value) : '',
  selectingYear: this.activePicker === 'YEAR',
- year: this.formatters.year(`${this.year}`),
+ year: this.formatters.year(`${this.inputYear}`),
  yearIcon: this.yearIcon
  },
  slot: 'title',
@@ -411,13 +365,28 @@ export default {
  sanitizeDateString (dateString, type) {
  const [year, month = 1, date = 1] = dateString.split('-')
  return `${year}-${pad(month)}-${pad(date)}`.substr(0, { date: 10, month: 7, year: 4 }[type])
+ },
+ setInputDate () {
+ if (this.value) {
+ const array = this.value.split('-')
+ this.inputYear = parseInt(array[0], 10)
+ this.inputMonth = parseInt(array[1], 10) - 1
+ if (this.type === 'date') {
+ this.inputDay = parseInt(array[2], 10)
+ }
+ } else {
+ this.inputYear = this.inputYear || this.now.getFullYear()
+ this.inputMonth = this.inputMonth == null ? this.inputMonth : this.now.getMonth()
+ this.inputDay = this.inputDay || this.now.getDate()
+ }
  }
  },
 
- mounted () {
+ created () {
  if (this.pickerDate !== this.tableDate) {
  this.$emit('update:pickerDate', this.tableDate)
  }
+ this.setInputDate()
  },
 
  render (h) {

src/components/VDatePicker/VDatePicker.month.spec.js

@@ -4,21 +4,27 @@ import VDatePicker from './VDatePicker'
 import VMenu from '@components/VMenu'
 
 test('VDatePicker.js', ({ mount, compileToFunctions }) => {
- it('should emit input event on year click', async () => {
- const cb = jest.fn()
+ it('should emit input event on year click (reactive picker)', async () => {
  const wrapper = mount(VDatePicker, {
  propsData: {
  value: '2013-05',
- type: 'month'
+ type: 'month',
+ reactive: true
  },
  data: {
  activePicker: 'YEAR'
  }
  })
 
- wrapper.vm.$on('input', cb);
+ const input = jest.fn()
+ wrapper.vm.$on('input', input);
+
+ const change = jest.fn()
+ wrapper.vm.$on('change', input);
+
  wrapper.find('.date-picker-years li.active + li')[0].trigger('click')
- expect(cb).toBeCalledWith('2012-05')
+ expect(input).toBeCalledWith('2012-05')
+ expect(change).not.toBeCalled()
  })
 
  it('should not emit input event on year click if month is not allowed', async () => {
@@ -174,21 +180,6 @@ test('VDatePicker.js', ({ mount, compileToFunctions }) => {
  expect(wrapper.vm.tableDate).toBe('2004')
  })
 
- it('should calculate the first allowed date', () => {
- const now = new Date()
- const year = now.getFullYear()
- const month = now.getMonth()
-
- const wrapper2 = mount(VDatePicker, {
- propsData: {
- value: null,
- type: 'month',
- allowedDates: value => value === `${year}-03`
- }
- })
- expect(wrapper2.vm.inputDate).toBe(`${year}-03`)
- })
-
  it('should set the table date when value has changed', () => {
  const wrapper = mount(VDatePicker, {
  propsData: {

src/components/VDatePicker/VDatePickerTitle.js

@@ -66,7 +66,7 @@ export default {
  }
  }, [
  this.$createElement('div', {
- domProps: { innerHTML: this.date },
+ domProps: { innerHTML: this.date || ' ' },
  key: this.date
  })
  ])