时间插件24小时

原创已于 2024-06-05 17:21:20 修改 · 750 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

收录于

于 2023-10-11 10:56:13 首次发布

本文介绍了如何在Vue应用中使用moment.js库创建一个显示昨天和今天24小时时间段的自定义组件，包括数据初始化、日期时间范围计算和格式化方法。

要在Vue中封装一个时间插件以显示昨天和今天24小时的日期和时间，可以使用moment.js库来处理日期和时间，并封装为一个自定义组件。

<template>
  <div>
    <h3>前一天日期和时间范围：</h3>
    <p>开始时间：{{ startTimeFormatted }}</p>
    <p>结束时间：{{ endTimeFormatted }}</p>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      startTime: null,
      endTime: null,
      startTimeFormatted: null,
      endTimeFormatted: null
    };
  },
  mounted() {
    this.calculateDateTimeRange();
    this.formatDateTime();
  },
  methods: {
    calculateDateTimeRange() {
      let currentDate = moment();
      let previousDate = moment().subtract(1, 'day');

      this.startTime = previousDate.startOf('day');
      this.endTime = currentDate.endOf('day');
    },
    formatDateTime() {
      this.startTimeFormatted = this.startTime.format('YYYY-MM-DD HH:mm:ss');
      this.endTimeFormatted = this.endTime.format('YYYY-MM-DD HH:mm:ss');
    }
  }
};
</script>