Javascript 简明教程

JavaScript - Date Formats

Date Formats

JavaScript 为我们提供了从基本的特定于语言环境的格式化到复杂自定义选项的各种 date formats 。了解不同的日期格式是 Web 开发的基础和必不可少的一个方面，无论您是构建动态 Web 应用程序、管理时间敏感数据还是仅仅以用户友好的方式显示日期。

在这里，我们将介绍 JavaScript 的不同日期格式，并通过一些示例来实现它们以更好地理解它们。以下是一个表，解释了 JavaScript 中使用的所有不同日期格式。

Format

Example

Description

ISO Format (UTC)

2024-01-29T12:34:56.789Z

具有年、月、日和时间组件的标准化格式。“Z”表示时间为 UTC（协调世界时）。

Locale Date and Time

1/29/2024, 12:34:56 PM

它是根据用户的系统或浏览器的设置进行的本地化日期和时间表示，并且符号会根据语言环境而异。

Custom Date Format

1 月 29 日，2024 年，下午 12:34:56 PST

自定义格式允许开发人员指定要包含的日期（年、月、日、小时、分、秒）组件以及它们应该以哪种格式出现。

Short Date Format

01/29/24

具有月、日和年的简短日期表示。顺序因语言环境而异。

Long Date Format

January 29, 2024

具有完整月份名称、日和年的长日期表示。

Short Time Format

12:34 PM

表示时间的短格式，带有小时和分钟。

Long Time Format

12:34:56 PM

表示时间的长格式，带有小时、分钟和秒。

UTC Date Format

2024 年 1 月 29 日星期二 12:34:56 GMT

世界协调时间 (UTC) 格式化的日期和时间字符串。它包括星期和时区缩写 (GMT)。

Epoch Timestamp

1643450096789

自 1970 年 1 月 1 日 00:00:00 UTC 以来经过的毫秒数。也被称为 Unix 时间戳。对于将日期当作数字进行处理和比较非常有用。

Relative Time

2 小时前、3 天前

以相对的方式表示时间差的人类可读格式，例如过去日期的“前”。对于显示自某个日期以来经过了多长时间非常有用。

Examples

Example 1: Displaying current date in different formats

此示例中的 JavaScript 会动态生成和显示页面上的各种日期格式：ISO 格式、区域日期和时间、自定义日期格式；日期的短格式和长格式；时间的短格式和长格式；UTC 日期格式，甚至还有纪元时间戳。此外，它还会计算两个给定日期之间的相对时间——当前日期与指定的过去日期进行比较，并将这些结果以人类可读的形式展示出来。此代码举例说明了在 HTML 上下文中使用 JavaScript 格式化日期的实用技术。

<!DOCTYPE html>
<html>
<body>
   <h2>All Types of Date Formats</h2>
   <script>
      const currentDate = new Date();

      function appendFormattedDate(type, formatFunction) {
         const formattedDate = formatFunction(currentDate);
         const paragraph = document.createElement('p');
         paragraph.innerText = `${type}: ${formattedDate}`;
         document.body.appendChild(paragraph);
      }

      appendFormattedDate('ISO Format (UTC)', date => date.toISOString());

      appendFormattedDate('Locale Date and Time', date => date.toLocaleString());

      const options = {
         year: 'numeric',
         month: 'short',
         day: 'numeric',
         hour: '2-digit',
         minute: '2-digit',
         second: '2-digit',
         timeZoneName: 'short'
      };
      appendFormattedDate('Custom Date Format', date => date.toLocaleString('en-US', options));

      appendFormattedDate('Short Date Format', date => date.toLocaleDateString());
      appendFormattedDate('Long Date Format', date => date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }));

      appendFormattedDate('Short Time Format', date => date.toLocaleTimeString());
      appendFormattedDate('Long Time Format', date => date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' }));

      appendFormattedDate('UTC Date Format', date => date.toUTCString());
      appendFormattedDate('Epoch Timestamp', date => date.getTime());

      const previousDate = new Date('2024-01-29T00:00:00Z');

      const relativeTime = formatRelativeTime(previousDate, currentDate);
      appendFormattedDate('Relative Time', () => relativeTime);

      // Function to calculate relative time
      function formatRelativeTime(previousDate, currentDate) {
         const elapsedMilliseconds = currentDate - previousDate;
         const seconds = Math.floor(elapsedMilliseconds / 1000);
         const minutes = Math.floor(seconds / 60);
         const hours = Math.floor(minutes / 60);

         if (seconds < 60) {
            return `${seconds} second${seconds !== 1 ? 's' : ''} ago`;
         } else if (minutes < 60) {
            return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
         } else if (hours < 24) {
            return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
         } else {
            return 'More than a day ago';
         }
      }
   </script>
</body>
</html>

Example 2: Customized date formats

此示例让我们更深入地了解没有前缀格式并且由开发人员选择使用的自定义日期格式。我们使用 Intl.DateTimeFormat 对象创建我们的格式（星期、月份、日期、年份）。使用此选项自定义日期格式，我们不仅可以选择要显示的日期部分，还可以选择它们的顺序。如果一个网站在某些国家/地区以 dd/mm/yyyy 显示日期，而如果在某些其他国家/地区以 mm-dd-yyyy 显示日期，则可能更合适。

<!DOCTYPE html>
<html>
<body>
   <h2>Custom Date Format Example</h2>
   <script>
      const currentDate = new Date();

      function customDateFormat(date) {
         const options = { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' };
         return new Intl.DateTimeFormat('en-US', options).format(date);
      }

      // Function to append formatted date to the body
      function appendFormattedDate(type, formatFunction) {
         const formattedDate = formatFunction(currentDate);
         document.body.innerHTML += `<p>${type}: ${formattedDate}</p>`;
      }

      // Append custom date format
      appendFormattedDate('Custom Date Format', customDateFormat);
   </script>
</body>
</html>

Example 3: Generating next 5 days dates

在此示例中，JavaScript 生成了未来的日期，特别是基于当前日期的未来五天的日期。然后，它以三种不同的方式对这些日期进行格式化并显示：在网页上展示了 ISO 格式；区域特定的排列和自定义布局。无需任何用户输入，JavaScript 的日期处理功能即可通过 generateFutureDates 函数动态生成的日期获得实际的说明。

<!DOCTYPE html>
<html>
<body>
   <h2>Future Dates Generator</h2>
   <div id="futureDates"></div>
   <script>
      function generateFutureDates() {
         const today = new Date();
         const futureDatesDiv = document.getElementById('futureDates');

         for (let i = 1; i <= 5; i++) {
            const futureDate = new Date(today.getTime() + i * 24 * 60 * 60 * 1000); // Adding 1 day for each iteration
            const isoFormat = futureDate.toISOString();
            const localeFormat = futureDate.toLocaleString();
            const customFormatOptions = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZoneName: 'short' };
            const customFormat = futureDate.toLocaleString('en-US', customFormatOptions);

            futureDatesDiv.innerHTML += `
            <p><strong>Day ${i}:</strong></p>
            <p>ISO Format (UTC): ${isoFormat}</p>
            <p>Locale Date and Time: ${localeFormat}</p>
            <p>Custom Format: ${customFormat}</p>
            <hr>
            `;
         }
      }

      generateFutureDates();
   </script>
</body>
</html>