vue.js 中的日期格式更改

Posted 2023-02-16

【中文标题】vue.js 中的日期格式更改

【英文标题】：Date format changing in vue.js

【发布时间】：2021-09-15 02:30:16

【问题描述】：

我正在使用日期选择器：

 <Datepicker :format="format"  v-model="form.start" name="start"></Datepicker>

它的格式是这样的：

data()
        return 
            format: "dd-MM-yyyy",
            form: new Form(
                id:'',
                start: '',

现在在提交表单时，我已将其附加到这样的表单数据中

let formData = new FormData();
formData.append('start', this.form.start);

当我控制台时，我得到类似这样的日期Sat Jul 03 2021 19:11:00 GMT+0530 (India Standard Time)

在控制器中，我正在验证日期，例如：

public function store(Request $request)
       
        $this->validate($request, [
            'start' => 'required|date|after_or_equal:'.now()->format('d-m-Y'),

输出：

The start is not a valid date

非常感谢任何帮助。

【问题讨论】：

请提供您正在使用的 datepicker 包、npmjs 链接或确切名称。那里有很多 Datepicker vue 包。

@nmfzone: 使用这个日期选择器npmjs.com/package/vuejs-datepicker，但是当我将this.form.start 附加到formData.start 时会出现问题

您好，您的问题还存在吗？

【参考方案1】：

从我在这里看到的，这是设计使然。

请查看this code，当您通过@keyup 选择日期时会出现问题，然后您将获得Date 对象（请查看here）。但是，如果您通过日历选择日期，则值应该是具有该格式的字符串，而不是 Date 对象。

为了解决您的问题，我建议您这样做。

像这样指定格式道具

data() 
    return 
        format: (value) => value,
        ...
    ;

然后，您可以使用dayjs手动格式化日期，先安装npm install dayjs --save，然后

const formData = new FormData();

formData.append('start', dayjs(this.form.start).format(this.format));