如何格式化JavaScript日期


Answers

使用toLocaleDateString();

toLocaleDateString()方法返回一個字符串,其中包含日期的日期部分的語言敏感表示。 locale和options參數讓應用程序指定應該使用其格式約定的語言,並允許自定義函數的行為。

您可以通過選項為不同的鍵傳遞值:

  1. 天:
    當天的表示。
    可能的值是“數字”,“2位”。
  2. 工作日:
    週日的表示。
    可能的值是“窄”,“短”,“長”。
  3. 年:
    今年的表現。
    可能的值是“數字”,“2位”。
  4. 月:
    月份的表示。
    可能的值是“數字”,“2位”,“窄”,“短”,“長”。
  5. 小時:
    小時的表示。
    可能的值是“數字”,“2位”。
  6. 分鐘:分鐘的表示。
    可能的值是“數字”,“2位”。
  7. 第二:
    第二個的表示。
    可能的值是“數字”,2位“。

所有這些鍵都是可選的。您可以根據您的要求更改選項值的數量。

對於不同的語言:

  1. “en-US”:適用於英語
  2. “hi-IN”:用於印地語
  3. “ja-JP”:適用於日語

您可以使用更多的語言選項。

例如

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date();

console.log(today.toLocaleDateString("en-US"));
console.log(today.toLocaleDateString("en-US",options));
console.log(today.toLocaleDateString("hi-IN", options));

// Outputs will be -
9/17/2016
Saturday, September 17, 2016
शनिवार, 17 सितंबर 2016

你也可以使用toLocaleString()方法來達到同樣的目的。 唯一的區別是這個函數提供了你不通過任何選項的時間。

// Example
9/17/2016, 1:21:34 PM

參考文獻:

對於toLocaleString()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

對於toLocaleDateString()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

Question

如何將JavaScript日期對象格式化為10-Aug-2010打印?







使用ECMAScript 6字符串模板:

let d = new Date();
let formatted = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;

如果您需要更改分隔符:

const delimiter = '/';
let formatted = [d.getFullYear(), d.getMonth() + 1, d.getDate()].join(delimiter);



不使用任何外部庫的JavaScript解決方案:

var now = new Date()
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
var formattedDate = now.getDate()+"-"+months[now.getMonth()]+"-"+now.getFullYear()
alert(formattedDate)



自定義格式功能:

對於固定格式,一個簡單的功能可以完成工作。 以下示例生成國際格式YYYY-MM-DD:

function dateToYMD(date) {
    var d = date.getDate();
    var m = date.getMonth() + 1; //Month from 0 to 11
    var y = date.getFullYear();
    return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
}

console.log(dateToYMD(new Date(2017,10,5))); // Nov 5

OP格式可以像下面這樣生成:

function dateToYMD(date) {
    var strArray=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var d = date.getDate();
    var m = strArray[date.getMonth()];
    var y = date.getFullYear();
    return '' + (d <= 9 ? '0' + d : d) + '-' + m + '-' + y;
}
console.log(dateToYMD(new Date(2017,10,5))); // Nov 5

注意:但是,擴展JavaScript標準庫通常不是一個好主意(例如,通過將此函數添加到Date的原型中)。

更高級的功能可以基於格式參數生成可配置的輸出。

如果編寫一個格式化函數的時間太長了,那麼有很多的庫都圍繞它來做。 其他一些答案已經列舉了他們。 但是越來越多的依賴關係也與此相反。

標準ECMAScript格式化功能:

由於更新版本的ECMAScript, Date類具有一些特定的格式功能:

toDateString :依賴於實現,只顯示日期。

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.todatestring

new Date().toDateString(); // e.g. "Fri Nov 11 2016"

toISOString :顯示ISO 8601日期和時間。

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.toisostring

new Date().toISOString(); // e.g. "2016-11-21T08:00:00.000Z"

toJSON :JSON的字符串。

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tojson

new Date().toJSON(); // e.g. "2016-11-21T08:00:00.000Z"

toLocaleDateString :依賴於實現,日期為區域設置格式。

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocaledatestring

new Date().toLocaleDateString(); // e.g. "21/11/2016"

toLocaleString :依賴於實現,以區域設置格式顯示日期和時間。

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocalestring

new Date().toLocaleString(); // e.g. "21/11/2016, 08:00:00 AM"

toLocaleTimeString :依賴於實現,是區域設置格式的時間。

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocaletimestring

new Date().toLocaleTimeString(); // e.g. "08:00:00 AM"

toString :日期的通用toString。

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tostring

new Date().toString(); // e.g. "Fri Nov 21 2016 08:00:00 GMT+0100 (W. Europe Standard Time)"

注意:可以使用這些格式生成自定義輸出

new Date().toISOString().slice(0,10); //return YYYY-MM-DD

示例代碼片段:

console.log("1) "+  new Date().toDateString());
console.log("2) "+  new Date().toISOString());
console.log("3) "+  new Date().toJSON());
console.log("4) "+  new Date().toLocaleDateString());
console.log("5) "+  new Date().toLocaleString());
console.log("6) "+  new Date().toLocaleTimeString());
console.log("7) "+  new Date().toString());
console.log("8) "+  new Date().toISOString().slice(0,10));




如果您在代碼中使用jQuery UI,則會有一個名為formatDate()的內置函數。 我用這種方式來格式化今天的日期:

var testdate = Date();
testdate = $.datepicker.formatDate( "d-M-yy",new Date(testdate));
alert(testdate);

您可以在jQuery UI文檔中看到許多其他格式化日期的示例




嘗試這個:

function init(){
    var d = new Date();
    var day = d.getDate();
    var x = d.toDateString().substr(4, 3);
    var year = d.getFullYear();
    document.querySelector("#mydate").innerHTML = day + '-' + x + '-' + year;
}
window.onload = init;
<div id="mydate"></div>







這是我為我的npm插件實現的

var monthNames = [
  "January", "February", "March",
  "April", "May", "June", "July",
  "August", "September", "October",
  "November", "December"
];

var Days = [
  "Sunday", "Monday", "Tuesday", "Wednesday",
  "Thursday", "Friday", "Saturday"
];

var formatDate = function(dt,format){
  format = format.replace('ss', pad(dt.getSeconds(),2));
  format = format.replace('s', dt.getSeconds());
  format = format.replace('dd', pad(dt.getDate(),2));
  format = format.replace('d', dt.getDate());
  format = format.replace('mm', pad(dt.getMinutes(),2));
  format = format.replace('m', dt.getMinutes());
  format = format.replace('MMMM', monthNames[dt.getMonth()]);
  format = format.replace('MMM', monthNames[dt.getMonth()].substring(0,3));
  format = format.replace('MM', pad(dt.getMonth()+1,2));
  format = format.replace(/M(?![ao])/, dt.getMonth()+1);
  format = format.replace('DD', Days[dt.getDay()]);
  format = format.replace(/D(?!e)/, Days[dt.getDay()].substring(0,3));
  format = format.replace('yyyy', dt.getFullYear());
  format = format.replace('YYYY', dt.getFullYear());
  format = format.replace('yy', (dt.getFullYear()+"").substring(2));
  format = format.replace('YY', (dt.getFullYear()+"").substring(2));
  format = format.replace('HH', pad(dt.getHours(),2));
  format = format.replace('H', dt.getHours());
  return format;
}

pad = function(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}



DateFormatter.formatDate(new Date(2010,7,10), 'DD-MMM-YYYY')

=> 10-Aug-2010

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

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

DateFormatter.formatDate(new Date(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')

=> 2 02 Wed Wednesday, 2 02 Feb February, 05 2005, 3 03 3 03, 4 04, 5 05, am AM

var DateFormatter = {
  monthNames: [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ],
  dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  formatDate: function (date, format) {
    var self = this;
    format = self.getProperDigits(format, /d+/gi, date.getDate());
    format = self.getProperDigits(format, /M+/g, date.getMonth() + 1);
    format = format.replace(/y+/gi, function (y) {
      var len = y.length;
      var year = date.getFullYear();
      if (len == 2)
        return (year + "").slice(-2);
      else if (len == 4)
        return year;
      return y;
    })
    format = self.getProperDigits(format, /H+/g, date.getHours());
    format = self.getProperDigits(format, /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, function (a) {
      var amPm = self.getAmPm(date.getHours())
      if (a === 'A')
        return amPm.toUpperCase();
      return amPm;
    })
    format = self.getFullOr3Letters(format, /d+/gi, self.dayNames, date.getDay())
    format = self.getFullOr3Letters(format, /M+/g, self.monthNames, date.getMonth())
    return format;
  },
  getProperDigits: function (format, regex, value) {
    return format.replace(regex, function (m) {
      var length = m.length;
      if (length == 1)
        return value;
      else if (length == 2)
        return ('0' + value).slice(-2);
      return m;
    })
  },
  getHours12: function (hours) {
    // https://.com/questions/10556879/changing-the-1-24-hour-to-1-12-hour-for-the-gethours-method
    return (hours + 24) % 12 || 12;
  },
  getAmPm: function (hours) {
    // https://.com/questions/8888491/how-do-you-display-javascript-datetime-in-12-hour-am-pm-format
    return hours >= 12 ? 'pm' : 'am';
  },
  getFullOr3Letters: function (format, regex, nameArray, value) {
    return format.replace(regex, function (s) {
      var len = s.length;
      if (len == 3)
        return nameArray[value].substr(0, 3);
      else if (len == 4)
        return nameArray[value];
      return 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(new Date(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時區偏移)

未經徹底測試




如果您需要使用普通JavaScript快速設置日期格式,請使用getDategetMonth + 1getFullYeargetHoursgetMinutes

var d = new Date();

var datestring = d.getDate()  + "-" + (d.getMonth()+1) + "-" + d.getFullYear() + " " +
d.getHours() + ":" + d.getMinutes();

// 16-5-2015 9:50

或者,如果你需要用零填充:

var datestring = ("0" + d.getDate()).slice(-2) + "-" + ("0"+(d.getMonth()+1)).slice(-2) + "-" +
    d.getFullYear() + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);

// 16-05-2015 09:50



var today = new Date();
var formattedToday = today.toLocaleDateString() + ' ' + today.toLocaleTimeString();



如果你已經在你的項目中使用jQuery UI ,你可以這樣做:

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

// formatted will be 'Jul 8, 2014'

一些日期選擇日期格式選項可用於here




受奇妙的正則表達式解決方案的啟發,我突然有了這個頭腦分裂的想法:

var D = Date().toString().split(" ");
document.getElementById("demo").innerHTML = D[2] + "-" + D[1] + "-" + D[3];



好的 ,我們有一些叫做Intl的東西,這對於在JavaScript中格式化日期非常有用:

你的日期如下:

var date = '10/8/2010';

並且您通過使用新的Date()如下所示更改為Date:

date = new Date(date);

現在,您可以使用以下區域設置列表以任何方式對其進行格式化:

date = new Intl.DateTimeFormat('en-AU').format(date); // Australian date format: "8/10/2010" 


date = new Intl.DateTimeFormat('en-US').format(date); // USA date format: "10/8/2010" 


date = new Intl.DateTimeFormat('ar-EG').format(date);  // Arabic date format: "٨‏/١٠‏/٢٠١٠"

如果你確實需要上面提到的格式,你可以這樣做:

date = new Date(Date.UTC(2010, 7, 10, 0, 0, 0));
var options = {year: "numeric", month: "short", day: "numeric"};
date = new Intl.DateTimeFormat("en-AU", options).format(date).replace(/\s/g, '-');

結果將是:

"10-Aug-2010"

有關ECMAScript國際化API(國際)的更多詳細信息,請訪問here




Links