vue 当前时间组件日期格式化方法封装

解二

已于 2024-03-05 10:37:51 修改

阅读量218

点赞数 1

文章标签： vue.js 前端 javascript

于 2024-03-05 10:27:18 首次发布

本文链接：https://blog.csdn.net/jierleijiajia/article/details/136471372

版权

本文介绍了如何在Vue应用中使用JavaScript实现一个动态更新的日期时间组件，包括获取当前日期、格式化日期以及使用定时器更新显示。

摘要由CSDN通过智能技术生成

时间组件

<template>
  <div class="time">
    {{ newData }}
  </div>
</template>
    
<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const yearMonthDay = ref('')
const nowData = ref('')
const newData = ref('')
const timer = ref(null)
// const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

onMounted(() => {
  timer.value = setInterval(() => {
    let datetime = new Date()
    let year = datetime.getFullYear()
    let month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
    let date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate()
    let hh = datetime.getHours() // 时
    let mm = datetime.getMinutes() // 分
    let ss = datetime.getSeconds() // 分
    // let day = weekDays[datetime.getDay()]; // 周
    let time = ''
    if (hh < 10) time += '0'
    time += hh + ':'
    if (mm < 10) time += '0'
    time += mm + ':'
    if (ss < 10) time += '0'
    time += ss
    yearMonthDay.value = `${year}-${month}-${date}`
    nowData.value = time
    newData.value = yearMonthDay.value + ' ' + nowData.value
  }, 1000)
})
onUnmounted(() => {
  if (timer.value) clearInterval(timer.value)
})
</script>

日期格式化

/**
 * 日期格式化
 */
export const dateFormat = (date, format) => {
  format = format ? format : 'yyyy-MM-dd hh:mm:ss'
  if (date != 'Invalid Date') {
    var o = {
      'M+': date.getMonth() + 1, //month
      'd+': date.getDate(), //day
      'h+': date.getHours(), //hour
      'm+': date.getMinutes(), //minute
      's+': date.getSeconds(), //second
      'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
      S: date.getMilliseconds(), //millisecond
    }
    if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    for (var k in o)
      if (new RegExp('(' + k + ')').test(format))
        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
        return format
      }
  return ''
}

// 使用
import { dateFormat } from '@/utils/utils'
dateFormat(new Date(val), 'yyyy-MM-dd hh:mm:ss') // val为需要格式转换的时间