fix(date-picker): allow external switching between date and month view

switching between date and month view using type prop was not working

closes #2809

src/components/VDatePicker/VDatePicker.js

@@ -237,6 +237,10 @@ export default {
  this.activePicker = 'MONTH'
  } else if (val === 'year') {
  this.activePicker = 'YEAR'
+ } else if (val === 'date' && this.activePicker === 'MONTH') {
+ const date = this.sanitizeDateString(`${this.tableYear}-${this.month + 1}-01`, 'date')
+ if (this.isAllowed(date)) this.inputDate = date
+ this.activePicker = 'DATE'
  }
  }
  },
@@ -338,7 +342,7 @@ export default {
  // Adds leading zero to month/day if necessary, returns 'YYYY' if type = 'year',
  // 'YYYY-MM' if 'month' and 'YYYY-MM-DD' if 'date'
  sanitizeDateString (dateString, type) {
- const [year, month, date] = dateString.split('-')
+ const [year, month = 1, date = 1] = dateString.split('-')
  return `${year}-${pad(month)}-${pad(date)}`.substr(0, { date: 10, month: 7, year: 4 }[type])
  },
  // For month = 12 it sets the tableDate to January next year

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

@@ -237,14 +237,20 @@ test('VDatePicker.js', ({ mount, compileToFunctions }) => {
  it('should update the active picker if type has changed', () => {
  const wrapper = mount(VDatePicker, {
  propsData: {
- type: 'month'
+ value: '1999-12-01',
+ type: 'date'
  }
  })
 
+ expect(wrapper.vm.activePicker).toBe('DATE')
+ wrapper.setProps({ type: 'month' })
+ expect(wrapper.vm.inputDate).toBe('1999-12')
  expect(wrapper.vm.activePicker).toBe('MONTH')
  wrapper.setProps({ type: 'date' })
- expect(wrapper.vm.activePicker).toBe('MONTH')
+ expect(wrapper.vm.inputDate).toBe('1999-12-01')
+ expect(wrapper.vm.activePicker).toBe('DATE')
  wrapper.setProps({ type: 'year' })
+ expect(wrapper.vm.inputDate).toBe('1999')
  expect(wrapper.vm.activePicker).toBe('YEAR')
  })