当前位置:首页 > 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中实现日期范围选择功能,可以通过多种方式完成。以下是几种常见的方法: 使用Element UI的DatePicker组件 Element UI提供了el-date…

mui vue实现日期插件

mui vue实现日期插件

MUI Vue 实现日期插件 在 Vue 项目中,可以使用 MUI(Material-UI)风格的日期选择器插件。以下是两种常见的实现方式: 使用 Vuetify 的日期选择器 Vuetify 是一…

react如何获取当前日期

react如何获取当前日期

获取当前日期的几种方法 在React中获取当前日期可以通过JavaScript的Date对象实现,以下是几种常见的方式: 方法1:直接使用new Date() const currentDate…

JS实现日期滚动选择

JS实现日期滚动选择

实现日期滚动选择的基本思路 使用HTML、CSS和JavaScript创建一个日期滚动选择器,允许用户通过滚动选择年、月、日。核心是通过监听滚动事件,动态更新显示的值。 HTML结构 创建一个包含年…

js 实现日期

js 实现日期

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