怎么把js日期变成显示日期

要将JavaScript日期对象转换为可读的日期字符串，可以使用多种方法：使用Date对象的内置方法、借助第三方库、进行自定义格式化等。 其中，使用Date对象的内置方法，如toLocaleDateString、toDateString等，是最常见的方式。这里将详细介绍如何使用这些方法，并提供一些实用的代码示例。

一、使用Date对象的内置方法

JavaScript中的Date对象自带了多种方法，可以轻松地将日期转换为不同格式的字符串。

1、toLocaleDateString()

toLocaleDateString() 方法返回与特定语言环境相对应的日期字符串。你可以指定语言和日期格式选项。

const date = new Date();

const formattedDate = date.toLocaleDateString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(formattedDate); // October 4, 2023

这种方法非常适合需要根据用户所在地调整日期格式的场景，如国际化支持。

2、toDateString()

toDateString() 方法返回日期部分的字符串表示，通常用于简单的日期格式显示。

const date = new Date();

const formattedDate = date.toDateString();
console.log(formattedDate); // Wed Oct 04 2023

这种方法不提供太多自定义选项，但它简单易用。

二、使用第三方库

有些项目需要更复杂的日期处理和格式化，这时候使用第三方库如Moment.js或date-fns会更方便。

1、Moment.js

Moment.js 是一个功能强大的日期处理库，可以非常方便地进行日期格式化。

const moment = require('moment');

const date = new Date();
const formattedDate = moment(date).format('MMMM Do YYYY, h:mm:ss a');
console.log(formattedDate); // October 4th 2023, 3:44:12 pm

2、date-fns

Date-fns 是一个轻量级的日期处理库，提供了很多有用的函数。

const { format } = require('date-fns');

const date = new Date();
const formattedDate = format(date, 'PPPPpppp');
console.log(formattedDate); // Wednesday, October 4th, 2023 at 3:44:12 PM GMT+02:00

三、自定义格式化

如果你需要完全自定义的日期格式，可以手动构建日期字符串。

1、手动格式化

通过Date对象的各个方法获取年月日等信息，然后拼接成所需格式。

const date = new Date();

const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始
const day = date.getDate().toString().padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // 2023-10-04

2、函数封装

为了提高代码复用性，可以将格式化逻辑封装成函数。

function formatDate(date, format) {

  const map = {
    yyyy: date.getFullYear(),
    mm: (date.getMonth() + 1).toString().padStart(2, '0'),
    dd: date.getDate().toString().padStart(2, '0'),
    HH: date.getHours().toString().padStart(2, '0'),
    MM: date.getMinutes().toString().padStart(2, '0'),
    SS: date.getSeconds().toString().padStart(2, '0'),
  };
  return format.replace(/yyyy|mm|dd|HH|MM|SS/g, matched => map[matched]);
}
const date = new Date();
const formattedDate = formatDate(date, 'yyyy-mm-dd HH:MM:SS');
console.log(formattedDate); // 2023-10-04 15:44:12

四、综合应用场景

在实际项目中，日期格式化常常与其他功能结合使用，如项目管理、日历应用等。这里推荐两个系统：研发项目管理系统PingCode和通用项目协作软件Worktile。

1、在项目管理系统中的应用

在项目管理系统中，日期格式化常用于任务的开始和结束时间、里程碑日期等。

// 示例：使用PingCode进行项目管理

const tasks = [
  { name: '设计阶段', startDate: new Date('2023-10-01'), endDate: new Date('2023-10-15') },
  { name: '开发阶段', startDate: new Date('2023-10-16'), endDate: new Date('2023-12-01') },
];
tasks.forEach(task => {
  task.startDateFormatted = task.startDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
  task.endDateFormatted = task.endDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
});
console.log(tasks);

2、在通用协作软件中的应用

在协作软件中，日期格式化常用于会议安排、任务截止日期等。

// 示例：使用Worktile进行任务协作

const meetings = [
  { title: '项目启动会', date: new Date('2023-10-05T10:00:00') },
  { title: '代码评审', date: new Date('2023-10-12T14:00:00') },
];
meetings.forEach(meeting => {
  meeting.dateFormatted = meeting.date.toLocaleString('en-US', { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' });
});
console.log(meetings);

总结

将JavaScript日期对象转换为可读的日期字符串，可以通过多种方法实现。常用的方法包括使用Date对象的内置方法、第三方库（如Moment.js和date-fns）以及自定义格式化。选择合适的方法取决于你的具体需求和项目情况。在项目管理和协作软件中，日期格式化是非常重要的一环，它可以帮助团队更好地理解和安排工作。推荐使用PingCode和Worktile来提升团队的协作效率。

相关问答FAQs：

1. 如何将 JavaScript 的日期转换为显示日期？
JavaScript 中的日期对象可以通过一些方法来转换为显示日期。您可以使用 toLocaleDateString() 方法将日期对象转换为本地化的日期字符串。例如：

var date = new Date();
var displayDate = date.toLocaleDateString();
console.log(displayDate);

这将根据用户的本地设置将日期转换为显示日期格式。

2. 如何在 HTML 页面中显示 JavaScript 日期？
要在 HTML 页面中显示 JavaScript 日期，您可以使用 JavaScript 将日期对象的值插入到 HTML 元素的内容中。例如，如果您有一个具有 id 属性的 <span> 元素，您可以使用以下代码将日期显示在该元素中：

<span id="date"></span>
<script>
  var date = new Date();
  var displayDate = date.toLocaleDateString();
  document.getElementById("date").innerHTML = displayDate;
</script>

这将在页面上的 <span> 元素中显示当前日期。

3. 如何将 JavaScript 日期显示为特定格式？
如果您想要将 JavaScript 的日期显示为特定的格式，可以使用其他一些方法来自定义日期格式。您可以使用 getFullYear()、getMonth()、getDate() 等方法来获取日期对象的年、月、日等信息，然后将它们组合成自定义的日期格式。例如：

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1; // 月份从0开始，需要加1
var day = date.getDate();

var displayDate = day + "/" + month + "/" + year; // 自定义日期格式
console.log(displayDate);

这将以 "日/月/年" 的格式显示日期。您可以根据需要自定义日期格式，并将其应用于您的代码中。