当前位置:首页 > JavaScript

js实现日期格式转换

2026-01-31 00:29:09JavaScript

日期格式转换方法

使用原生Date对象

通过JavaScript的Date对象可以实现日期解析和格式化。将字符串或时间戳转换为Date对象后,可调用方法获取年月日等组件:

const date = new Date('2023-10-01');
const year = date.getFullYear(); // 2023
const month = date.getMonth() + 1; // 10
const day = date.getDate(); // 1

手动拼接格式

获取日期组件后可通过字符串拼接实现格式转换:

function formatDate(date) {
  return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')}`;
}
// 输出:2023-10-01

使用toLocaleDateString

利用本地化API快速转换格式,通过配置参数指定输出样式:

const date = new Date();
const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
console.log(date.toLocaleDateString('zh-CN', options)); 
// 输出示例:2023/10/01

使用第三方库

Moment.js或date-fns等库提供更强大的格式化功能:

// Moment.js示例
moment().format('YYYY-MM-DD HH:mm:ss');

// date-fns示例
import { format } from 'date-fns';
format(new Date(), 'yyyy-MM-dd');

时间戳转换

将Unix时间戳转换为可读格式:

function timestampToDate(timestamp) {
  return new Date(timestamp * 1000).toISOString().split('T')[0];
}
// 输入1633046400 输出2021-10-01

正则替换法

对已有格式字符串进行正则替换:

'01-10-2023'.replace(/(\d{2})-(\d{2})-(\d{4})/, '$3/$2/$1');
// 输出:2023/10/01

每种方法适用于不同场景,原生API适合简单需求,第三方库适合复杂国际化需求,正则法则适合已有字符串的快速转换。

js实现日期格式转换

分享给朋友:

相关文章

vue实现日期选择

vue实现日期选择

Vue 实现日期选择的方法 使用原生 HTML5 input[type="date"] Vue 可以直接绑定原生 HTML5 的日期选择器,适合简单场景: <template> &…

vue实现日期加减

vue实现日期加减

实现日期加减的方法 在Vue中实现日期加减可以通过JavaScript的Date对象或第三方库如moment.js或date-fns来完成。以下是几种常见的方法: 使用JavaScript的Date…

vue实现格式转换

vue实现格式转换

vue实现格式转换的方法 在Vue中实现格式转换可以通过多种方式完成,包括使用过滤器、计算属性、方法或第三方库。以下是几种常见的实现方式: 使用计算属性 计算属性适合对数据进行格式化处理,尤其…

vue实现日期组件

vue实现日期组件

Vue 日期组件的实现方法 使用原生 HTML5 input[type="date"] 在 Vue 中可以直接使用 HTML5 的原生日历控件,这种方式简单但样式和功能受限。 <templ…

vue 实现日期多选

vue 实现日期多选

实现日期多选的方法 使用 v-model 绑定数组 在 Vue 中,可以通过 v-model 绑定一个数组来实现多选。日期选择器组件(如 el-date-picker)需设置 type="dates"…

vue实现根据日期排序

vue实现根据日期排序

Vue 实现根据日期排序的方法 在 Vue 中实现日期排序可以通过多种方式完成,以下是几种常见的方法: 使用 JavaScript 的 sort 方法 Vue 的响应式系统可以结合 JavaS…