JavaScript日期时间格式化函数分享

2023年5月27日下午12:52 • JavaScript

标题：JavaScript日期时间格式化函数分享

JavaScript中提供了一些用于格式化日期时间的函数，下面我们将分步骤讲解如何使用这些函数。

步骤一：获取当前日期时间

const now = new Date();

步骤二：使用toLocaleDateString()函数格式化日期

const date = now.toLocaleDateString();

上述代码中，now为步骤一获取的当前日期时间，使用toLocaleDateString()函数将日期格式化成本土日期格式。

示例输出：

"2022/1/7"

步骤三：使用toLocaleTimeString()函数格式化时间

const time = now.toLocaleTimeString();

上述代码中，now为步骤一获取的当前日期时间，使用toLocaleTimeString()函数将时间格式化成本土时间格式。

示例输出：

"上午11:12:13"

步骤四：使用toLocaleString()函数格式化日期时间

const dateTime = now.toLocaleString();

上述代码中，now为步骤一获取的当前日期时间，使用toLocaleString()函数将日期时间格式化成本土格式。

示例输出：

"2022/1/7 上午11:12:13"

步骤五：使用moment.js库格式化日期时间

除了使用JavaScript原生的函数外，也可以使用moment.js库来方便地格式化日期时间。

首先需要在HTML文件中引入moment.js库：

<script src="https://momentjs.com/downloads/moment.js"></script>

接下来可以使用库中的format函数格式化日期时间：

const formattedDateTime = moment(now).format("YYYY-MM-DD HH:mm:ss");

上述代码使用moment(now)获取当前日期时间的moment对象，然后使用.format()函数将日期时间格式化成指定格式。

示例输出：

"2022-01-07 11:12:13"

以上就是使用JavaScript原生函数及moment.js库格式化日期时间的攻略，下面提供一个示例代码：

const now = new Date();

const date = now.toLocaleDateString();
console.log(date);

const time = now.toLocaleTimeString();
console.log(time);

const dateTime = now.toLocaleString();
console.log(dateTime);

const formattedDateTime = moment(now).format("YYYY-MM-DD HH:mm:ss");
console.log(formattedDateTime);

输出结果：

"2022/1/7"
"上午11:12:13"
"2022/1/7 上午11:12:13"
"2022-01-07 11:12:13"

另外，我们可以使用 moment.js 库的 getInstance() 函数来实现多语言的日期格式化，示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://momentjs.com/downloads/moment.js"></script>
    <meta charset="UTF-8">
    <title>moment.js test</title>
  </head>
  <body>
    <div id="date"></div>
    <div id="time"></div>

    <script type="text/javascript">
      const lang = 'zh-cn'; // 语言类型
      const now = new Date();

      const date = moment(now).locale(lang).format('LL'); // 日期格式
      document.getElementById("date").innerHTML = date;

      const time = moment(now).locale(lang).format('LTS'); // 时间格式
      document.getElementById("time").innerHTML = time;
    </script>
  </body>
</html>

运行结果（语言为中文）：