Buefy datepicker with Laravel: Expected Date, got String - laravel

Question

I have a form that is populated by data received from an API request to my backend.
I am using v-model to bind the data to the fields (for example):
<input type="text" v-model="fields.name">
Everything works just fine. But when it comes to Buefy datepicker I get the following warning:
Invalid prop: type check failed for prop "value". Expected Date, got String.
This is correct since this is the value I get back from Laravel is "2019-02-01 00:00:00". I am trying to parse this String to a Date using the Buefy property date-parser but with no luck:
<b-datepicker
:date-parser="(date) => new Date(Date.parse(date))"
v-model="fields.budget_date"
:first-day-of-week="1"
placeholder="DD/MM/YYYY"
name="order_date"
editable>
</b-datepicker>
Update:
This is the data object:
data() {
return {
csrf: document.querySelector('meta[name="csrf-token"]').content,
fields: {},
errors: {},
success: false,
loaded: true,
loading: false,
}
Then I use Axios.get to fetch the data from the server and assign them to the fields object like so:
this.fields = response.data;
This is how is see the fields.budget_date in Vue DevTools:
Any idea how to overcome this? Thank you in advance.

Answer 1

I just had this problem in a wrapper component around Buefy's b-datepicker component.
The solution can be derived from christostsang's answer which is to pass in the initial value wrapped in new Date().
My wrapper component prop type looks like this:
initialValue: {
type: Date,
required: false,
default: () => undefined,
},
and it is used like this:
<my-datepicker
:initial-value="new Date(something.renews_on)"
></my-datepicker>
I'm using mostly the default props from b-datepicker, but my wrapper component is using this:
<b-datepicker
v-model="value"
:initial-value="initialValue"
:placeholder="placeholder"
:name="name"
:date-formatter="dateFormatter"
:date-parser="dateParser"
:date-creator="dateCreator"
... etc
...
dateFormatter: {
type: Function,
required: false,
default: date => date.toLocaleDateString(),
},
dateParser: {
type: Function,
required: false,
default: date => new Date(Date.parse(date)),
},
dateCreator: {
type: Function,
required: false,
default: () => new Date(),
},
You can investigate the default props here: https://buefy.org/documentation/datepicker

Answer 2

Finally figured it out.
The warning is pretty clear: Don't use a string here, use a Date object.
So after getting the response from the server, I parsed the string value into Date object and then bind it to v-model:
this.fields.budget_date = new Date(this.fields.budget_date)
So now I get this into Vue DevTools:
As you can see the budget_date is of the correct Date format, unlike created_at which is a string.
Parser function (:date-parser) gives you the correct Date object during user date selection.
What I wanted was to set the v-model value based on the data stored in my database. And for the b-datepicker to work that needs to be Date object, not String.