使用Javascript进行当前时间格式化

Question

我想使用 Javascript 在特定格式中获取当前时间。

使用下面的函数并调用它将会给我一个值： Fri Feb 01 2013 13:56:40 GMT+1300 (New Zealand Daylight Time) 但我希望将它格式化为 Friday 2:00pm 1 Feb 2013

var d = new Date();
var x = document.getElementById("time");
x.innerHTML = d;

当然，上面的代码没有任何格式化逻辑，但是我还没有遇到过任何“有效”的格式化程序。

- Seong Lee

---

有关Node.js的类似问题，请参见https://dev59.com/_Wgv5IYBdhLWcg3wYvui - Ohad Schneider

我不知道你们有多烦恼这个问题...但是现在已经是2023年了，我们仍然无法在网页上打印出任何给定时区的当前时间，而不写下感觉像800行代码那么多... - Joeri

Answer 1

你可能想要尝试

var d = new Date();
d.toLocaleString();       // -> "2/1/2013 7:37:08 AM"
d.toLocaleDateString();   // -> "2/1/2013"
d.toLocaleTimeString();  // -> "7:38:05 AM"

文档

- Ye Lin Aung

---

为什么你的方法对我不起作用？d.toLocaleTimeString()和d.toLocaleTimeString()都无法正常工作。 - afzalex

@afzalex 你的意思是没有得到任何返回值吗？ - Ye Lin Aung

尝试这个：new Date().toLocaleString(); - blueberry0xff

console.log(new Date().toLocaleString()); // 9/27/2015, 2:52:18 PM - blueberry0xff

值得注意的是，这些方法可以使用区域设置和选项，以提供更大的灵活性。例如，使用美国地区并显示24小时制时间： date.toLocaleTimeString('en-US', { hour12: false });参考链接： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString - purgatory101

Answer 2

JavaScript Date对象有多个方法可以提取其各个部分： getFullYear() - 返回4位数的年份
getMonth() - 返回表示一年中月份的从0开始的整数（0-11）
getDate() - 返回一个月中的日期（1-31）
getDay() - 返回一周中的星期几（0-6）。0表示星期日，6表示星期六。
getHours() - 返回一天中的小时数（0-23）
getMinutes() - 返回分钟数（0-59）
getSeconds() - 返回秒数（0-59）
getMilliseconds() - 返回毫秒数（0-999）
getTimezoneOffset() - 返回本地时间和UTC之间的分钟数。

没有内置方法可以获取本地化字符串，例如“星期五”，“二月”或“下午”。您需要自己编写代码来获取所需的字符串。要获得想要的字符串，您至少需要存储表示日期和月份的字符串。

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

然后，使用上述方法将其组合起来：

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var d = new Date();
var day = days[d.getDay()];
var hr = d.getHours();
var min = d.getMinutes();
if (min < 10) {
    min = "0" + min;
}
var ampm = "am";
if( hr > 12 ) {
    hr -= 12;
    ampm = "pm";
}
var date = d.getDate();
var month = months[d.getMonth()];
var year = d.getFullYear();
var x = document.getElementById("time");
x.innerHTML = day + " " + hr + ":" + min + ampm + " " + date + " " + month + " " + year;

<span id="time"></span>

我有一个日期格式化函数，希望将其包含在我的标准库中。它接受一个格式字符串参数来定义所需的输出。这些格式字符串大致基于.Net自定义日期和时间格式字符串。对于您指定的格式，以下格式字符串可以工作："dddd h:mmtt d MMM yyyy"。

var d = new Date();
var x = document.getElementById("time");
x.innerHTML = formatDate(d, "dddd h:mmtt d MMM yyyy");

演示: jsfiddle.net/BNkkB/1

这是我的完整日期格式化函数:

function formatDate(date, format, utc) {
    var MMMM = ["\x00", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var MMM = ["\x01", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var dddd = ["\x02", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var ddd = ["\x03", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

    function ii(i, len) {
        var s = i + "";
        len = len || 2;
        while (s.length < len) s = "0" + s;
        return s;
    }

    var y = utc ? date.getUTCFullYear() : date.getFullYear();
    format = format.replace(/(^|[^\\])yyyy+/g, "$1" + y);
    format = format.replace(/(^|[^\\])yy/g, "$1" + y.toString().substr(2, 2));
    format = format.replace(/(^|[^\\])y/g, "$1" + y);

    var M = (utc ? date.getUTCMonth() : date.getMonth()) + 1;
    format = format.replace(/(^|[^\\])MMMM+/g, "$1" + MMMM[0]);
    format = format.replace(/(^|[^\\])MMM/g, "$1" + MMM[0]);
    format = format.replace(/(^|[^\\])MM/g, "$1" + ii(M));
    format = format.replace(/(^|[^\\])M/g, "$1" + M);

    var d = utc ? date.getUTCDate() : date.getDate();
    format = format.replace(/(^|[^\\])dddd+/g, "$1" + dddd[0]);
    format = format.replace(/(^|[^\\])ddd/g, "$1" + ddd[0]);
    format = format.replace(/(^|[^\\])dd/g, "$1" + ii(d));
    format = format.replace(/(^|[^\\])d/g, "$1" + d);

    var H = utc ? date.getUTCHours() : date.getHours();
    format = format.replace(/(^|[^\\])HH+/g, "$1" + ii(H));
    format = format.replace(/(^|[^\\])H/g, "$1" + H);

    var h = H > 12 ? H - 12 : H == 0 ? 12 : H;
    format = format.replace(/(^|[^\\])hh+/g, "$1" + ii(h));
    format = format.replace(/(^|[^\\])h/g, "$1" + h);

    var m = utc ? date.getUTCMinutes() : date.getMinutes();
    format = format.replace(/(^|[^\\])mm+/g, "$1" + ii(m));
    format = format.replace(/(^|[^\\])m/g, "$1" + m);

    var s = utc ? date.getUTCSeconds() : date.getSeconds();
    format = format.replace(/(^|[^\\])ss+/g, "$1" + ii(s));
    format = format.replace(/(^|[^\\])s/g, "$1" + s);

    var f = utc ? date.getUTCMilliseconds() : date.getMilliseconds();
    format = format.replace(/(^|[^\\])fff+/g, "$1" + ii(f, 3));
    f = Math.round(f / 10);
    format = format.replace(/(^|[^\\])ff/g, "$1" + ii(f));
    f = Math.round(f / 10);
    format = format.replace(/(^|[^\\])f/g, "$1" + f);

    var T = H < 12 ? "AM" : "PM";
    format = format.replace(/(^|[^\\])TT+/g, "$1" + T);
    format = format.replace(/(^|[^\\])T/g, "$1" + T.charAt(0));

    var t = T.toLowerCase();
    format = format.replace(/(^|[^\\])tt+/g, "$1" + t);
    format = format.replace(/(^|[^\\])t/g, "$1" + t.charAt(0));

    var tz = -date.getTimezoneOffset();
    var K = utc || !tz ? "Z" : tz > 0 ? "+" : "-";
    if (!utc) {
        tz = Math.abs(tz);
        var tzHrs = Math.floor(tz / 60);
        var tzMin = tz % 60;
        K += ii(tzHrs) + ":" + ii(tzMin);
    }
    format = format.replace(/(^|[^\\])K/g, "$1" + K);

    var day = (utc ? date.getUTCDay() : date.getDay()) + 1;
    format = format.replace(new RegExp(dddd[0], "g"), dddd[day]);
    format = format.replace(new RegExp(ddd[0], "g"), ddd[day]);

    format = format.replace(new RegExp(MMMM[0], "g"), MMMM[M]);
    format = format.replace(new RegExp(MMM[0], "g"), MMM[M]);

    format = format.replace(/\\(.)/g, "$1");

    return format;
};

- gilly3

---

非常感谢。虽然我的最终代码需要略微调整，但你的见解确实有所帮助。 - Seong Lee

如何将日期格式从"2016/03/01 11:00"转换为"Sat Mar 01 2016 11:00:00 GMT+0530 (IST)"？ - Vishal Singh

MMMM[0] 如何返回正确的月份名称，而不是索引 0 处的不可打印字符？它不应该是 MMMM[M] 吗？我是不是很蠢？（算了吧。它将其设置为不可打印字符，稍后替换以避免冲突） - Danegraphics

Answer 3

2017更新：使用toLocaleDateString和toLocaleTimeString来格式化日期和时间。传递给这些方法的第一个参数是区域设置值，如en-us。第二个参数（如果存在）指定格式选项，例如工作日的长形式。

let date = new Date();  
let options = {  
    weekday: "long", year: "numeric", month: "short",  
    day: "numeric", hour: "2-digit", minute: "2-digit"  
};  

console.log(date.toLocaleTimeString("en-us", options)); 

输出: 2017年10月25日星期三下午8点19分

请参考以下链接获取更多详细信息。

JavaScript日期和时间字符串

- Joomler

---

此时距离第一次回答这个问题已经过去了四年，现在这是最方便和灵活的解决方案，也是对这个问题的回答。应该将其作为当前（公元2018年）实践的一个例子进行更高程度的推广 :-) - Jochem Schulenklopper

Torn。@thdoan的strftime端口看起来更加灵活。例如，toLocalTimeString提供了4种日期样式：full、long、medium、short，也许这些术语的含义在某个地方有定义。与此同时，strftime可以（很可能）匹配其中的任何一个和更多。另一方面，toLocalTimeString支持时区。我希望这包括使用夏令时的时区... - captain puget

完美的答案，解决了整个问题。我认为缺少一个直接描述参数和选项的 toLocaleString() 链接。 - mr_ET

Answer 4

您可以使用我翻译的 strftime 的端口：

/* Port of strftime(). Compatibility notes:
 *
 * %c - formatted string is slightly different
 * %D - not implemented (use "%m/%d/%y" or "%d/%m/%y")
 * %e - space is not added
 * %E - not implemented
 * %h - not implemented (use "%b")
 * %k - space is not added
 * %n - not implemented (use "\n")
 * %O - not implemented
 * %r - not implemented (use "%I:%M:%S %p")
 * %R - not implemented (use "%H:%M")
 * %t - not implemented (use "\t")
 * %T - not implemented (use "%H:%M:%S")
 * %U - not implemented
 * %W - not implemented
 * %+ - not implemented
 * %% - not implemented (use "%")
 *
 * strftime() reference:
 * http://man7.org/linux/man-pages/man3/strftime.3.html
 *
 * Day of year (%j) code based on Joe Orost's answer:
 * https://dev59.com/Mmoy5IYBdhLWcg3wWcmg
 *
 * Week number (%V) code based on Taco van den Broek's prototype:
 * http://techblog.procurios.nl/k/news/view/33796/14863/calculate-iso-8601-week-and-year-in-javascript.html
 */
function strftime(sFormat, date) {
  if (!(date instanceof Date)) date = new Date();
  var nDay = date.getDay(),
    nDate = date.getDate(),
    nMonth = date.getMonth(),
    nYear = date.getFullYear(),
    nHour = date.getHours(),
    aDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    aMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    aDayCount = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
    isLeapYear = function() {
      if ((nYear&3)!==0) return false;
      return nYear%100!==0 || nYear%400===0;
    },
    getThursday = function() {
      var target = new Date(date);
      target.setDate(nDate - ((nDay+6)%7) + 3);
      return target;
    },
    zeroPad = function(nNum, nPad) {
      return ('' + (Math.pow(10, nPad) + nNum)).slice(1);
    };
  return sFormat.replace(/%[a-z]/gi, function(sMatch) {
    return {
      '%a': aDays[nDay].slice(0,3),
      '%A': aDays[nDay],
      '%b': aMonths[nMonth].slice(0,3),
      '%B': aMonths[nMonth],
      '%c': date.toUTCString(),
      '%C': Math.floor(nYear/100),
      '%d': zeroPad(nDate, 2),
      '%e': nDate,
      '%F': date.toISOString().slice(0,10),
      '%G': getThursday().getFullYear(),
      '%g': ('' + getThursday().getFullYear()).slice(2),
      '%H': zeroPad(nHour, 2),
      '%I': zeroPad((nHour+11)%12 + 1, 2),
      '%j': zeroPad(aDayCount[nMonth] + nDate + ((nMonth>1 && isLeapYear()) ? 1 : 0), 3),
      '%k': '' + nHour,
      '%l': (nHour+11)%12 + 1,
      '%m': zeroPad(nMonth + 1, 2),
      '%M': zeroPad(date.getMinutes(), 2),
      '%p': (nHour<12) ? 'AM' : 'PM',
      '%P': (nHour<12) ? 'am' : 'pm',
      '%s': Math.round(date.getTime()/1000),
      '%S': zeroPad(date.getSeconds(), 2),
      '%u': nDay || 7,
      '%V': (function() {
              var target = getThursday(),
                n1stThu = target.valueOf();
              target.setMonth(0, 1);
              var nJan1 = target.getDay();
              if (nJan1!==4) target.setMonth(0, 1 + ((4-nJan1)+7)%7);
              return zeroPad(1 + Math.ceil((n1stThu-target)/604800000), 2);
            })(),
      '%w': '' + nDay,
      '%x': date.toLocaleDateString(),
      '%X': date.toLocaleTimeString(),
      '%y': ('' + nYear).slice(2),
      '%Y': nYear,
      '%z': date.toTimeString().replace(/.+GMT([+-]\d+).+/, '$1'),
      '%Z': date.toTimeString().replace(/.+\((.+?)\)$/, '$1')
    }[sMatch] || sMatch;
  });
}

使用示例：

// Returns "Thursday 4:45pm 15 Sep 2016"
strftime('%A %l:%M%P %e %b %Y');

// You can optionally pass it a Date object
// Returns "Friday 2:00pm 1 Feb 2013"
strftime('%A %l:%M%P %e %b %Y', new Date('Feb 1, 2013 2:00 PM'));

最新的代码在这里： https://github.com/thdoan/strftime 可以获取。

- thdoan

Answer 5

查看Date类的内部，您会发现可以提取所有位（日期、月份、年份、小时等）。

对于类似Fri 23:00 1 Feb 2013的内容，代码如下：

date = new Date();

weekdayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var dateString = weekdayNames[date.getDay()] + " " 
    + date.getHours() + ":" + ("00" + date.getMinutes()).slice(-2) + " " 
    + date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear();

console.log(dateString);

- Lee Meador

---

Date#getDay返回一个整数，而不是星期几的名称。此外，在我看来，MDN在快速传达有关日期对象的要点方面做得更差，所以我不明白为什么需要进行贬低。 - Ninjaxor

date.getMinutes() 的问题在于当分钟数小于 10 时返回单个数字，导致时间显示为“10:4 上午”而不是更常见的“10:04 上午”。 - Jochem Schulenklopper

@JochemSchulenklopper 添加了非日期代码以显示分钟前导零 - Lee Meador

@Ninjaxor 添加了非日期相关的代码，用于将数字转换为字符串。如果您需要英文名称，这应该可以工作。 - Lee Meador

Answer 6

仅有时间

const getTime = ()=>{
    const d = new Date();
    const dd = [d.getHours(), d.getMinutes(), d.getSeconds()].map((a)=>(a < 10 ? '0' + a : a));
    return dd.join(':');
};

- Vadim

Answer 7

有许多很棒的库可供使用，特别是在IT技术领域。以下是其中几个：

• http://www.datejs.com/
• http://momentjs.com/
• https://github.com/samsonjs/strftime

如今，实际上不应该有必要发明自己的格式说明符。

- slf

---

只是想提一下，截至2017年10月，moment是JavaScript中与时间相关的事物的当前标准。 - shawon191

感谢@shawon191的更新 :) 是的，moment很棒。d3也添加了一些时间相关的内容，所以如果你已经在使用它，你可能可以省去导入库的步骤 https://github.com/d3/d3/blob/master/API.md#time-formats-d3-time-format - slf

Answer 8

使用 Moment 库。

我强烈推荐使用 Moment 库。如果你能够使用第三方库，我强烈建议这样做。除了格式化之外，它还能很好地处理时区、解析、持续时间和时间旅行，这将以简单和时间为代价（少量的大小、抽象和性能损失）带来回报。

用法

你想要的东西看起来像这样:

2013年2月1日星期五 下午2:00

那么，只需要使用 Moment 库，你就可以这样做:

import Moment from "moment";

Moment().format( "dddd h:mma D MMM YYYY" ); //=> "Wednesday 9:20am 9 Dec 2020"

如果你想匹配那个确切的日期和时间，你只需要执行以下操作：

import Moment from "moment";

Moment( "2013-2-1 14:00:00" ).format( "dddd h:mma D MMM YYYY" ) ); //=> "Friday 2:00pm 1 Feb 2013"

这里有许多其他格式选项，可以在这里找到。

安装

前往他们的主页查看更详细的说明，但是如果你正在使用npm或yarn，安装非常简单：

npm install moment --save

或者

yarn add moment

- Joshua Pinter

---

仅仅是一个快速的提醒，Moment 官方已经被废弃了。我们仍然广泛使用它，并会在可预见的未来继续使用，但请注意这一点。 - Joshua Pinter

Answer 9

d = Date.now();
d = new Date(d);
d = (d.getMonth()+1)+'/'+d.getDate()+'/'+d.getFullYear()+' '+(d.getHours() > 12 ? d.getHours() - 12 : d.getHours())+':'+d.getMinutes()+' '+(d.getHours() >= 12 ? "PM" : "AM");

console.log(d);

- Cris

Answer 10

要实现 MySQL 风格请使用下面的函数: 2019/02/28 15:33:12

• 如果您点击下面的
• '运行代码段' 按钮
• 它将展示一个简单的实时数字时钟示例，演示将出现在代码段下方。

function getDateTime() {
        var now     = new Date(); 
        var year    = now.getFullYear();
        var month   = now.getMonth()+1; 
        var day     = now.getDate();
        var hour    = now.getHours();
        var minute  = now.getMinutes();
        var second  = now.getSeconds(); 
        if(month.toString().length == 1) {
             month = '0'+month;
        }
        if(day.toString().length == 1) {
             day = '0'+day;
        }   
        if(hour.toString().length == 1) {
             hour = '0'+hour;
        }
        if(minute.toString().length == 1) {
             minute = '0'+minute;
        }
        if(second.toString().length == 1) {
             second = '0'+second;
        }   
        var dateTime = year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;   
         return dateTime;
    }

    // example usage: realtime clock
    setInterval(function(){
        currentTime = getDateTime();
        document.getElementById("digital-clock").innerHTML = currentTime;
    }, 1000);

<div id="digital-clock"></div>

- centralhubb.com