export function formatDate (date, fmt) { //获取年份 if (/(y+)/.test(fmt)) { // 把数字变成字符串 let dateY = date.getFullYear() + ""; //RegExp.$1 在判断中出现过,且是括号括起来的,所以 RegExp.$1 就是 "yyyy" fmt = fmt.replace(RegExp.$1, dateY.substr(4 - RegExp.$1.length)); } //获取其他 let o = { "M+": date.getMonth() + 1 + '月', "d+": date.getDate(), "h+": date.getHours(), "m+": date.getMinutes(), "s+": date.getSeconds(), }; console.log(o) for (const k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ""; console.log(11, str, RegExp.$1) fmt = fmt.replace( RegExp.$1, RegExp.$1.length === 1 ? str : (("00" + str).substr(str.length)) ); console.log('fmt', fmt) } } return fmt; }
时间: 2024-02-14 13:14:33 浏览: 98
这是一个 JavaScript 函数,用于格式化日期。
函数名:formatDate
参数:
- date:日期对象
- fmt:格式字符串,例如 "yyyy-MM-dd hh:mm:ss"
返回值:格式化后的日期字符串。
函数实现:
- 首先,使用正则表达式匹配格式字符串中的年份标识符("y+"),替换成日期对象中的年份。
- 然后,定义一个对象 o,包含其他需要格式化的日期部分(月份、日、小时、分钟、秒),并遍历该对象。
- 对于每个日期部分,使用正则表达式匹配格式字符串中对应的标识符(例如 "M+" 表示月份),并替换成对应的日期部分。
- 最后,返回格式化后的日期字符串。
请注意,由于该函数使用了正则表达式,因此在使用时需要特别小心,以避免出现不必要的错误。
相关问题
vue的date转
### Vue.js 中日期转换的方法及实现
在 Vue.js 开发过程中,日期转换是一个常见的需求。可以通过多种方式来处理日期格式化问题,以下是几种常用方法及其具体实现。
#### 方法一:使用 JavaScript 原生 `Date` 对象
可以直接利用 JavaScript 的原生 `Date` 对象来进行日期的解析和格式化操作。通过自定义函数,在 Vue 组件中的 `methods` 或者 `computed` 属性中完成日期转换逻辑。
```javascript
// 定义一个日期格式化的工具函数
function formatDate(date, fmt) {
const o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (let k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, ('00' + o[k]).slice(-2));
}
}
return fmt;
}
export default formatDate;
```
在 Vue 组件中调用该函数:
```javascript
<script>
import formatDate from './formatDate';
export default {
data() {
return {
rawDate: new Date(), // 当前时间戳
};
},
computed: {
formattedDate() {
return formatDate(this.rawDate, 'yyyy-MM-dd hh:mm:ss'); // 自定义格式
}
}
};
</script>
<template>
<div>{{ formattedDate }}</div> <!-- 输出格式化后的日期 -->
</template>
```
这种方法完全依赖于前端代码,无需引入额外库[^1]。
---
#### 方法二:借助第三方库(如 moment.js)
如果项目中有复杂的日期计算或国际化需求,可以考虑使用成熟的第三方库,比如 **moment.js** 或其轻量级替代品 **day.js**。
安装依赖:
```bash
npm install dayjs
```
在 Vue 组件中使用:
```javascript
import dayjs from 'dayjs';
export default {
data() {
return {
rawDate: new Date(), // 当前时间戳
};
},
computed: {
formattedDate() {
return dayjs(this.rawDate).format('YYYY-MM-DD HH:mm:ss'); // 使用 day.js 进行格式化
}
}
};
<template>
<div>{{ formattedDate }}</div> <!-- 输出格式化后的日期 -->
</template>
```
这种方式的优点在于功能强大且易于维护,适合复杂场景下的开发工作[^3]。
---
#### 方法三:通过 Webpack 配置注入环境变量
对于某些特定情况下需要动态生成的时间字符串,可以在构建阶段设置全局常量,并将其嵌入模板中。例如,下面展示了如何向应用中注入编译时刻的时间戳作为默认值[^4]:
```javascript
config.plugin('define').tap(args => {
let obj = args[0]['process.env'];
obj.VUE_APP_BUILD_TIME = JSON.stringify(new Date().toLocaleString());
return args;
});
```
随后即可在任何地方访问此变量:
```html
<div>The app was built at {{ process.env.VUE_APP_BUILD_TIME }}.</div>
```
---
#### 总结
以上介绍了三种不同的日期转换方案,开发者可以根据实际需求选择合适的方式。无论是简单的本地化还是复杂的多语言支持,Vue.js 提供了灵活而强大的机制去满足各种业务诉求。
阅读全文
相关推荐




