laravel - 与Laravel的buefy datepicker:预期日期，得到了字符串

我有一个表单，该表单由从API请求到后端的数据填充。

我正在使用v-model将数据绑定(bind)到字段(例如):

<input type="text" v-model="fields.name">

一切正常。但是当涉及到 Buefy datepicker 时，我得到以下警告:



这是正确的，因为这是我从Laravel返回的值是“2019-02-01 00:00:00”。我试图使用Buefy属性 date-parser 将此字符串解析为Date，但是没有运气:

<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>

更新:

这是数据对象:

data() {
  return {
    csrf: document.querySelector('meta[name="csrf-token"]').content,
    fields: {},
    errors: {},
    success: false,
    loaded: true,
    loading: false,
}

然后，我使用 Axios.get 从服务器获取数据，并将其分配给field对象，如下所示:

this.fields = response.data;

这是如何在Vue DevTools中查看fields.budget_date的方法:



任何想法如何克服这个？先感谢您。

最佳答案

我只是在Buefy的b-datepicker组件周围的包装器组件中遇到了这个问题。

该解决方案可以从christostsang的答案中得出，该答案将传入包裹在new Date()中的初始值。

我的包装器组件prop类型如下所示:

initialValue: {
    type: Date,
    required: false,
    default: () => undefined,
},

它的用法是这样的:

<my-datepicker
    :initial-value="new Date(something.renews_on)"
></my-datepicker>

我主要使用的是b-datepicker的默认 Prop ，但是我的包装器组件使用的是:

<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(),
},

您可以在此处调查默认 Prop :https://buefy.org/documentation/datepicker