如何将Date对象格式化为字符串?


当前回答

如果您已经在项目中使用jQuery UI,您可以这样做:

var formatted = $.datepicker.formatDate("M d, yy", new Date("2014-07-08T09:02:21.377"));

// formatted will be 'Jul 8, 2014'

这里提供了一些可以使用的日期选择器日期格式选项。

其他回答

如果您已经在项目中使用ExtJS,则可以使用Ext.Date:

var date = new Date();
Ext.Date.format(date, "d-M-Y");

返回:

"11-Nov-2015"

将jQuery UI插件添加到页面:

function DateFormate(dateFormate, datetime) {
    return $.datepicker.formatDate(dateFormate, datetime);
};

包装解决方案:Luxon或date fns

如果你想使用一个解决方案来适应所有人,我建议使用date fns或Luxon。

Luxon托管在Moment.js网站上,由Moment.jss开发人员开发,因为Momentjs具有开发人员想解决但无法解决的局限性。

要安装:

npm安装luxon或纱线添加luxon(其他安装方法请访问链接)

例子:

luxon.DateTime.fromISO('2010-08-10').toFormat('yyyy-LL-dd');

产量:

2010年8月10日

手动解决方案

使用与Moment.js、ClassDateTimeFormatter(Java)和ClassSimpleDateFormat(Java)类似的格式,我实现了一个全面的解决方案formatDate(date,patternStr),代码易于阅读和修改。您可以显示日期、时间、AM/PM等。有关更多示例,请参阅代码。

例子:

formatDate(new Date(),'EEEE,MMMM d,yyyy HH:mm:ss:S')

(formatDate在下面的代码段中实现)

产量:

2018年10月12日星期五18:11:23:445

单击“运行代码段”尝试代码

日期和时间模式

yy=2位年份;yyyy=全年

M=数字月;MM=2位月;MMM=短月份名称;MMMM=完整月份名称

EEEE=工作日全名;EEE=短工作日名称

d=数字日;dd=2位数字日

h=小时上午/下午;hh=上午/下午两位数小时;H=小时;HH=2位数小时

m=分钟;mm=2位数分钟;aaa=上午/下午

s=秒;ss=2位数秒

S=毫秒

var month名称=[“一月”,“二月”,“三月”,“四月”,“五月”,“六月”,“七月”,“八月”、“九月”、“十月”、“十一月”、“十二月”];var dayOfWeekNames=[“星期日”、“星期一”、“周二”,“周三”、“周四”、“周五”、“周六”];函数formatDate(日期,patternStr){if(!patternStr){patternStr='M/d/yyyy';}var day=date.getDate(),month=date.getMonth(),year=date.getFullYear(),hour=date.getHours(),minute=date.getMinutes(),second=date.getSeconds(),毫秒=date.getMilliseconds(),h=小时%12,hh=两位数广告(h),HH=两位数(小时),mm=两个DigitPad(分钟),ss=twoDigitPad(秒),aaa=小时<12?'上午:下午,EEEE=dayOfWeekNames[date.getDay()],EEE=EEEE.substr(0,3),dd=twoDigitPad(天),M=月+1,MM=两个DigitPad(M),MMMM=monthNames[月],MMM=MMMM.substr(0,3),yyyy=年+“”,yy=yyyy.substr(2,2);//检查是否将使用月份名称patternStr=patternStr.替换('h',hh).替换('h',h)替换('HH',HH)替换('H',小时).替换('m',mm).替换(m',分钟).替换('s',ss).替换(s'',second).replace('S',毫秒)替换('dd',dd)替换('d',day)替换('EEE',EEEE)替换('EE',EEE)替换('yyyy',yyyy).替换('yy',yy).替换('aaa',aaa);如果(patternStr.indexOf('MMM')>-1){patternStr=patternStr.替换('MMMM',MMMM).替换('MMM',MMM);}其他{patternStr=patternStr.替换('MM',MM).替换(M’,M);}返回模式Str;}函数twoDigitPad(num){返回num<10?“0”+num:num;}console.log(formatDate(newDate()));console.log(formatDate(new Date(),'dd MMM yyyy'))//OP的请求console.log(formatDate(new Date(),'EEEE,MMMM d,yyyy HH:mm:ss.S aaa'));console.log(formatDate(new Date(),'EEE,MMM d,yyyy HH:mm'));console.log(formatDate(new Date(),'yyyy-MM-dd HH:MM:ss.S'));console.log(formatDate(new Date(),'M/dd/yyyy h:mmaa'));

谢谢你@Gerry提起Luxon。

DateFormatter.formatDate(新日期(2010,7,10),'DD-MMM-YYYY')

=>2010年8月10日

DateFormatter.formatDate(new Date(),'YYYY-MM-DD HH:MM:ss')

=>2017-11-22 19:52:37

DateFormatter.formatDate(新日期(2005,1,2,3,4,5),'D DD DDD DDD,M MM MMM MMMM,YY YYYY,h hh h hh,M MM,s ss,a a')

=>2002年2月2日星期三2005年2月5日,2003年3月3日,4月4日,5月5日上午

var日期格式设置工具={月份名称:[“一月”,“二月”,“三月”,“四月”,“五月”,“六月”,“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”],dayName:[“星期日”、“星期一”、“周二”、“周三”、“周四”、“周五”、“周六”],formatDate:函数(日期,格式){var self=this;format=self.getProperDigits(format,/d+/gi,date.getDate());format=self.getProperDigits(格式,/M+/g,date.getMonth()+1);format=format.replace(/y+/gi,函数(y){var len=y.length;var year=date.getFullYear();如果(长度==2)return(年份+“”).sslice(-2);否则如果(len==4)回归年;返回y;})format=self.getProperDigits(格式,/H+/g,date.getHours());format=self.getProperDigits(格式,/h+/g,self.getHours12(date.getHours()));format=self.getProperDigits(format,/m+/g,date.getMinutes());format=self.getProperDigits(format,/s+/gi,date.getSeconds());format=format.replace(/a/ig,函数(a){var amPm=self.getAmPm(date.getHours())如果(a==“a”)返回amPm.toUpperCase();返回amPm;})format=self.getFullOr3Letters(format,/d+/gi,self.dayNames,date.getDay())format=self.getFullOr3Letters(format,/M+/g,self.monthNames,date.getMonth())返回格式;},getProperDigits:函数(格式、正则表达式、值){return format.replace(正则表达式,函数(m){var长度=m.length;如果(长度==1)返回值;否则如果(长度==2)return(“0”+值).sslice(-2);返回m;})},getHours12:函数(小时){// https://stackoverflow.com/questions/10556879/changing-the-1-24-hour-to-1-12-hour-for-the-gethours-method返回(小时+24)%12||12;},getAmPm:函数(小时){// https://stackoverflow.com/questions/8888491/how-do-you-display-javascript-datetime-in-12-hour-am-pm-format回程时间>=12?'下午':'上午';},getFullOr3Letters:函数(格式,正则表达式,名称数组,值){return format.replace(正则表达式,函数){var len=s.length;如果(长度==3)return nameArray[value].substr(0,3);否则如果(len==4)return nameArray[value];返回s;})}}console.log(DateFormatter.formatDate(new Date(),'YYYY-MM-DD HH:MM:ss'));console.log(DateFormatter.formatDate(new Date(),'D DD DDD DDDD,M MM MMM MMMM,YY YYYY,h hh h hh,M MM,s ss,a a'));console.log(DateFormatter.formatDate(新日期(2005,1,2,3,4,5),'D DD DDD DDDD,M MM MMM MMMM,YY YYYY,h hh h hh,M MM,s ss,a a'));

格式描述取自Ionic Framework(它不支持Z、UTC时区偏移)

未彻底测试

字体版本

可以轻松增强以支持所需的任何格式字符串。当这样的通用解决方案非常容易创建,并且应用程序中经常出现日期格式时,我不建议在应用程序中对日期格式代码进行硬编码。这很难读懂,也隐藏了你的意图。格式字符串清楚地显示您的意图。

原型函数

interface Date {
    format(formatString: string): string;
}

Date.prototype.format = function (formatString: string): string {
  return Object.entries({
    YYYY: this.getFullYear(),
    YY: this.getFullYear().toString().substring(2),
    yyyy: this.getFullYear(),
    yy: this.getFullYear().toString().substring(2),
    MMMM: this.toLocaleString('default', { month: 'long' }),
    MMM: this.toLocaleString('default', { month: 'short' }),
    MM: (this.getMonth() + 1).toString().padStart(2, '0'),
    M: this.getMonth() + 1,
    DDDD: this.toLocaleDateString('default', { weekday: 'long' }),
    DDD: this.toLocaleDateString('default', { weekday: 'short' }),
    DD: this.getDate().toString().padStart(2, '0'),
    D: this.getDate(),
    dddd: this.toLocaleDateString('default', { weekday: 'long' }),
    ddd: this.toLocaleDateString('default', { weekday: 'short' }),
    dd: this.getDate().toString().padStart(2, '0'),
    d: this.getDate(),
    HH: this.getHours().toString().padStart(2, '0'), // military
    H: this.getHours().toString(), // military
    hh: (this.getHours() % 12).toString().padStart(2, '0'),
    h: (this.getHours() % 12).toString(),
    mm: this.getMinutes().toString().padStart(2, '0'),
    m: this.getMinutes(),
    SS: this.getSeconds().toString().padStart(2, '0'),
    S: this.getSeconds(),
    ss: this.getSeconds().toString().padStart(2, '0'),
    s: this.getSeconds(),
    TTT: this.getMilliseconds().toString().padStart(3, '0'),
    ttt: this.getMilliseconds().toString().padStart(3, '0'),
    AMPM: this.getHours() < 13 ? 'AM' : 'PM',
    ampm: this.getHours() < 13 ? 'am' : 'pm',
  }).reduce((acc, entry) => {
    return acc.replace(entry[0], entry[1].toString())
  }, formatString)
}

Javascript版本

同样,只需删除接口,以及冒号及其关联冒号之后的类型名称。

demo

function unitTest() {
    var d: Date = new Date()
    console.log(d.format('MM/dd/yyyy hh:mm:ss')) // 12/14/2022 03:38:31
    console.log(d.format('yyyy-MM-dd HH:mm:ss')) // 2022-12-14 15:38:31
}

unitTest()