Datepicker initial view date when opened

[dragospeta]

The date picker view is always opened at the present date or the model value date.

In my use case i have the last 18 years disabled and the user has to go 18 years behind so that he can select a date. A workaround is to initialize the date with the maximum valid date but if the input is empty it will open at the present date.

Could we have a prop that tells the component at what date the view should open?

[mengxiong10]

No one prop can customize it.
But you can change the methods like this.

import DatePicker from 'vue2-datepicker'

DatePicker.components.CalendarPanel.methods.updateNow = function () {
  this.now = this.value
              ? new Date(this.value)
              : new Date('2017-01-01') // when the value is empty, default is new Date()
}

[dragospeta]

Thanks, it works! For those who need it put this code in main.js and use view-date="2017-01-01" prop where you need it in the datepicker component.

DatePicker.props.viewDate = {
  type: String,
  default: function () {
    return null
  }
}
DatePicker.components.CalendarPanel.methods.updateNow = function () {
  var viewDate = this.$parent.$props.viewDate

  if (this.value) this.now = new Date(this.value)
  else if (viewDate) this.now = new Date(viewDate)
  else this.now = new Date()
}

[mengxiong10]

v2.10.0 Add the prop default-value to implement it

<date-picker v-model="value" default-value="2020-01-01" />