当前位置:首页 > 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

正则替换法

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

js实现日期格式转换

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

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

分享给朋友:

相关文章

vue实现滑动日期

vue实现滑动日期

实现滑动日期选择器的基本思路 在Vue中实现滑动日期选择器可以通过结合第三方库或自定义组件完成。核心逻辑包括日期数据的生成、滑动动画的实现以及用户交互处理。 使用第三方库(如vant) 安装vant…

react如何在前台显示日期

react如何在前台显示日期

在React中显示日期的方法 使用JavaScript的Date对象 通过创建new Date()获取当前日期,利用其方法(如toLocaleDateString())格式化显示: const cu…

react如何獲取日期控件的值

react如何獲取日期控件的值

獲取日期控件值的方法 在React中,獲取日期控件的值取決於使用的庫或原生HTML元素。以下是常見的實現方式: 使用原生HTML5 <input type="date"> import…

react实现日期时间

react实现日期时间

实现日期时间选择器 使用 react-datepicker 库可以快速实现日期时间选择功能。该库提供了丰富的配置选项和样式支持。 安装依赖: npm install react-datepicke…

js 实现日期

js 实现日期

在 JavaScript 中实现日期操作可以通过多种方式完成,以下是常见的方法和示例: 获取当前日期和时间 使用 Date 对象获取当前日期和时间: const currentDate = new…