Datepicker doesn't update value without hovering over it

[RuneHanssens]

Describe the bug

When the v-model of the datepicker changes externally, it doesn't update the displayed value untill you hover over it. By default I initialize the v-model to new Date() but in some cases I will overwrite this value by something I fetch from my API.

I worked like this:

<b-form-datepicker
              id="datepicker"
              v-model="date"
              value-as-date
              required
></b-form-datepicker>

@Component
export default class MyComponent extends Vue {
private date = new Date();
...
async mounted() {
    if ( ... ) {
      this.date = await ...
    }
  }
}

Expected behavior

The datepicker should update when it's v-model updates.

Versions

Libraries:

• BootstrapVue: 2.5.0
• Bootstrap: 4.4.1
• Vue: 2.6.11

Environment:

• Browser: Chrome

[Hiws]

https://codepen.io/Hiws/pen/MWwJNKL

Short demo of the issue.

Oddly enough if you change it multiple times, it will update after the 2nd time without hovering, however be 1 update out-of-sync.
Hovering will resync it.

[tmorehouse]

Interesting...

What if you wrap the manual update of the v-model in a $nextTick?

[tmorehouse]

This codepen works: https://codepen.io/tmorehouse/pen/dyoNxeW

Note that since you are setting the value (v-model) as a Date object, you need to set the value-as-date prop also.

[Hiws]

The codepen you linked looks to have the same issue still.
The v-model gets updated but the "label" in the b-datepicker doesn't update until you update a 2nd time or hover over the component.

[tmorehouse]

Strange... for me (Chrome on Windows), it is working with the change.

[RuneHanssens]

Very strange... I still have the issue aswell with the codepen you linked also Chrome on Windows

[tmorehouse]

Do you see a similar issue when changing the v-model on the <b-calendar> component?

[tmorehouse]

Actually this is fixed in PR #4824

There was a typo in the data property for the formattedValue (which is updated by the context event)

You can try it out in the dev docs playgound: https://bootstrap-vue.netlify.com/play

[reydez]

Describe the bug

When the v-model of the datepicker changes externally, it doesn't update the displayed value untill you hover over it. By default I initialize the v-model to new Date() but in some cases I will overwrite this value by something I fetch from my API.

I worked like this:

<b-form-datepicker
              id="datepicker"
              v-model="date"
              value-as-date
              required
></b-form-datepicker>

@Component
export default class MyComponent extends Vue {
private date = new Date();
...
async mounted() {
    if ( ... ) {
      this.date = await ...
    }
  }
}

Expected behavior

The datepicker should update when it's v-model updates.

Versions

Libraries:

• BootstrapVue: 2.5.0
• Bootstrap: 4.4.1
• Vue: 2.6.11

Environment:

• Browser: Chrome

this is happening to me also, i dont know whats going on! ... it seems to work good when i open a modal and try to edit information the date renders ok, but when i try to get info from a data base and for example the page loads it has that problem

[tmorehouse]

@reydez See comment #4827 (comment) above

[RuneHanssens]

A little workaround for this issue. Just wrap your component in a div that displays if you initialized your component.

<div v-if="initialized">
...

private async mounted() {
    this.date = await ...
    this.initialized = true
}

[tmorehouse]

BootstrapVue 2.6.0 has been released

[tmorehouse]

BootstrapVue 2.6.0 has been released