使用时刻在 vue 组件中格式化日期答案

【问题标题】：Use moment to format date in a vue component使用时刻在 vue 组件中格式化日期
【发布时间】：2021-09-15 05:09:08
【问题描述】：

我有一个带有日期类型输入字段的 Vue 组件：

<input
    type="date"
    name="start_date"
    id="start_date"
    v-model="absence.start_date"
>

在我的脚本中，我试图格式化日期以使其正确显示：

<script>
    export default {
        data() {
            return {
                absence: {
                    start_date: null,
                }
            }
        },
        created() {
            const request = axios
                .get(`/api/absences/${this.$route.params.id}`)
                .then(response => {
                    this.absence = response.data.data;
                });
        }
    }
</script>

但它不适用于 API 返回的格式。

如果我手动设置日期，它会以这种格式工作

start_date: '2021-01-01',

但是它被 api 调用覆盖。我在 app.js 中安装了 moment，如何使用 moment 来格式化 api 调用返回的日期？

编辑

这是 API 响应：

{"success":true,"data":{"id":1,"start_date":"2021-07-24 00:00:00","end_date":"2021-07-25 00:00:00","notes":"Quis nisi repellendus ipsa. Eum asperiores sunt iusto exercitationem autem. Qui harum adipisci praesentium laboriosam. Fugit quasi voluptatem excepturi et non autem atque quibusdam. Sed aperiam molestias quaerat incidunt.","created_at":"2021-06-28T19:34:16.000000Z","updated_at":"2021-07-03T15:46:10.000000Z","status":1}}

【问题讨论】：

请添加更多详细信息。你是如何设计 API 的？ API 究竟返回了什么？看起来问题更多出在后端 API 而不是 vue 本身。
moment(startDate).format('MM/DD/YYYY'); 这样就足够了吗？stackoverflow.com/questions/15993913/format-date-with-moment-js 您也可以执行 moment(startDate).isValid() 来查看它是否是 moment 可以采用的有效格式

标签： javascript vue.js momentjs

【解决方案1】：

您可以执行以下操作。工作示例代码here

并确保你安装了时刻 js

<input
   type="date"
   name="start_date"
   id="start_date"
   v-model="formattedStartDate"
>

// Make sure moment is installed

<script>
    import moment from 'moment'

    export default {
        data() {
            return {
                absence: {
                    start_date: null,
                }
            }
        },
        computed: {
            formattedStartDate() {
                return moment(this.absence.start_date).format('yyyy-MM-DD');
            }
        },
        created() {
            const request = axios
                .get(`/api/absences/${this.$route.params.id}`)
                .then(response => {
                    this.absence = response.data.data;
                });
        }
    }
</script>

【讨论】：

顺便说一句，Moment.js 团队建议不要在新项目中使用 Moment，并推荐一些替代方案。见momentjs.com/docs

【解决方案2】：

<input type="date"> 只接受 ISO 日期字符串的日期部分作为有效值，但 API 数据包括时间：

{
  "start_time": "2021-07-24 00:00:00"
                            ^^^^^^^^
}

您可以使用空格上的String.prototype.split 轻松解析该字符串中的日期，获取第一个数组元素（日期）：

const data = response.data.data
this.absence = {
  ...data,
  start_date: data.start_date.split(' ')[0]
}

demo

【讨论】：