Select year to change

[SergioReis97]

Getting

[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'offsetTop' of null"

if i try to click in the year to change it. Once that happens component just renders this Image

[trevorstacy]

Can you show the date picker's declaration and applicable data for the props?

[SergioReis97]

Sure, here:

<date-picker @close="closeFrom" @input="myGetFunction" v-if="from_date.show" :format="formatDate" v-model="from_date.date"></date-picker>

...
data(){
   return{
      from_date: { show: false, date: "" },
      //....
   }
},
methods: {
    closeFrom() {
      if (this.from_date.date.trim() == "")
        this.from_date.date = ""; // If no value, set label back to normal
      this.from_date.show = false
    },
    formatDate(date) {
      return moment(new Date(date)).format('DD-MM-YYYY')
    },
    openFrom() {
      // Using  http://vuematerial.io/ inputs (as readonly) to preview the value on the form, also the input element has this function on that @click.native.
      this.from_date.date = " "; // This is set because if the input has value the label goes up in their inputs 
      this.from_date.show = true
    },
}

[trevorstacy]

Okay, I've found out the issue, and there's a couple different fixed for it.

The issue

You are setting the date to an empty space this.from_date.date = " ";

Lines 656-658 check if there is a specified date, and if there is, it will use that. Obviously this means if the date is invalid, the years will not be calculated correctly, thus the years will not be calculated correctly and the v-for will not loop through anything. There will always be at least one year, so there's no need to add a v-if to where the years are looped.

The fixes

1. Add .trim() to the value statement, so if there is just a space it will not count it as being a date.

I honestly don't like this idea at all. To be honest, I'm actually using my own implementation of the material design text field component, and ran into this same issue of having to set the date to a space so that the text field would not close when you pick a date. I fixed this by adding a manual prop to the TextField component. The manual prop basically changes the functionality of the label moving up and down from if the text field is focused or has a value, to manually setting it. This way I can emit events that the textfield listens to and change the focus accordingly. For example, if I wanted to open the text field I could do something like this.$emit('set-textfield-focus', { id: 'beginning-date', value: true }). You may want to discuss this with the maintainer(s) of vue material. It's definitely functionality that MD Textfield's should have, as this is a perfect use case for it, but is often overlooked because it's not mentioned in the spec and people instinctively use focus / value to decide if the material label should be up or down.

Anyway,

2. Create a watcher for the date that will check to see if the date is a valid date by passing it into a new Date(this.value) constructor. If the date isn't valid, it will log an error saying the specified date is invalid.

I like this approach the best and will probably implement it, unless you have another suggestion that is better / makes more sense.

[SergioReis97]

I'm perfectly fine with the second fix. The first seems to be harder to accomplish since vue material is lacking some contributers and the development has been slowing down there... I understand now the problem and i'll check if i can do a fix around that once i get some time, Thanks for the help.

[Kinzi]

Any progress here? Did you get it fixed @SergioReis97? I'm stuck with the same issue...