Câu hỏi Cách định dạng ngày JavaScript


Làm thế nào tôi có thể định dạng một đối tượng ngày JavaScript để in 10-Aug-2010?


1265
2017-08-23 23:28


gốc


Như thường lệ: hãy cẩn thận THE MONTH là ZERO-INDEXED! Vì vậy, tháng 1 không phải là một ... - Christophe Roussy
Ngoài ra hãy cẩn thận, myDate.getDay() không trả lại ngày trong tuần, nhưng vị trí của ngày trong tuần liên quan đến tuần. myDate.getDate()trả về ngày trong tuần hiện tại. - Jimenemex
Để định dạng DateTimes trong javascript, hãy sử dụng Intl.DateTimeFormat vật. Tôi mô tả nó trong bài viết của tôi: Bài đăng. Tôi tạo giải pháp trực tuyến cho câu trả lời của bạn Intl.DateTimeFormat  Kiểm tra trực tuyến - Iman Bahrampour


Các câu trả lời:


Chú ý: Có câu trả lời tốt hơn bên dưới. Câu trả lời này được viết vào năm 2010 và các giải pháp mới hơn và tốt hơn đã đến từ đó. OP nên chấp nhận một câu trả lời khác.

function formatDate(date) {
  var monthNames = [
    "January", "February", "March",
    "April", "May", "June", "July",
    "August", "September", "October",
    "November", "December"
  ];

  var day = date.getDate();
  var monthIndex = date.getMonth();
  var year = date.getFullYear();

  return day + ' ' + monthNames[monthIndex] + ' ' + year;
}

console.log(formatDate(new Date()));  // show current date-time in console

Bạn có thể chỉnh sửa mảng monthNames để sử dụng Jan, Feb, Mar, v.v.


864
2017-08-23 23:35



Thực sự xem xét sử dụng thư viện như Moment.js hoặc Date.js thay thế. Vấn đề này đã được giải quyết nhiều lần. - Benjamin Oakes
Tại sao chúng không bao gồm một hàm trong Date đối tượng để làm điều này? - Nayan
Một điểm quan trọng là phương thức getMonth () trả về một chỉ mục tháng dựa trên 0 để ví dụ tháng 1 sẽ trả về ngày 0 tháng 2 sẽ trả về 1, v.v ... - Marko
moment.js 2.9.0 là 11,6k gzipped, ví dụ này là 211 byte gzipped. - mrzmyr
Cần lưu ý rằng bạn không bao giờ nên sử dụng document.write (). Các vấn đề về bảo mật và hiệu suất rất lớn. - Matt Jensen


Sử dụng toLocaleDateString();

Các toLocaleDateString() phương thức trả về một chuỗi có biểu diễn nhạy cảm về ngôn ngữ của phần ngày của ngày tháng. Các đối số ngôn ngữ và tùy chọn cho phép các ứng dụng chỉ định ngôn ngữ có quy ước định dạng nên được sử dụng và cho phép tùy chỉnh hành vi của hàm.

Các giá trị bạn có thể chuyển trong các tùy chọn cho các khóa khác nhau:

  1. ngày: 
    Các đại diện của ngày.
    Giá trị có thể là "số", "2 chữ số".
  2. ngày trong tuần: 
    Các đại diện của các ngày trong tuần.
    Các giá trị có thể là "hẹp", "ngắn", "dài".
  3. năm: 
    Đại diện của năm.
    Giá trị có thể là "số", "2 chữ số".
  4. tháng: 
    Biểu diễn của tháng.
    Giá trị có thể là "số", "2 chữ số", "hẹp", "ngắn", "dài".
  5. giờ: 
    Biểu diễn của giờ.
    Giá trị có thể là "số", "2 chữ số".
  6. phút: Biểu diễn của phút.
     Giá trị có thể là "số", "2 chữ số".
  7. thứ hai: 
    Đại diện của thứ hai.
    Giá trị có thể là "số", 2 chữ số ".

Tất cả các phím này là tùy chọn. Bạn có thể thay đổi số lượng giá trị tùy chọn dựa trên yêu cầu của mình và điều này cũng sẽ phản ánh sự hiện diện của từng thời hạn ngày.

Lưu ý: Nếu bạn chỉ muốn định cấu hình các tùy chọn nội dung, nhưng vẫn sử dụng ngôn ngữ hiện tại, hãy chuyển null cho tham số đầu tiên sẽ gây ra lỗi. Sử dụng undefined thay thế.

Đối với các ngôn ngữ khác nhau:

  1. "en-US": Tiếng Anh
  2. "hi-IN": Tiếng Hindi
  3. "ja-JP": Dành cho người Nhật

Bạn có thể sử dụng nhiều tùy chọn ngôn ngữ hơn.

Ví dụ

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

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

Bạn cũng có thể sử dụng toLocaleString() phương pháp cho cùng một mục đích. Sự khác biệt duy nhất là chức năng này cung cấp thời gian khi bạn không vượt qua bất kỳ tùy chọn nào.

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

Tham khảo:


790
2017-12-01 08:11



wow, nó thực sự trả tiền để cuộn xuống. câu trả lời của bạn sẽ thổi bay một câu trả lời với hơn 300 phiếu bầu. lam tôt lăm. - Ryan Loggerythm
Cảm ơn bạn vì câu trả lời hữu ích này. Đây phải là một trong những chấp nhận. Làm tốt lắm. - Sammy
Ôi chúa ơi, đây là câu trả lời đúng. Tôi không thể tin rằng Google cung cấp thông tin này đến mức nào. - M. Herold
Đã gần như sắp sử dụng moment.js cho một định dạng đơn giản. May mắn thay đã làm một tìm kiếm thêm google và tìm thấy đã có API bản địa làm điều này. Đã lưu một phụ thuộc bên ngoài. Tuyệt vời! - Leon li
Có vẻ như câu trả lời này nên là câu trả lời "hiện tại" tốt nhất. Cũng sử dụng tùy chọn "hour12: true" để sử dụng định dạng 12 giờ so với 24 giờ. Có thể sẽ được thêm vào danh sách tóm tắt của bạn trong câu trả lời. - Doug Knudsen


Sử dụng thư viện date.format:

var dateFormat = require('dateformat');
var now = new Date();
dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");

trả về:

Saturday, June 9th, 2007, 5:46:21 PM 

dateformat trên npm

http://jsfiddle.net/phZr7/1/


524
2017-08-23 23:35



điều này có vẻ như giải pháp dài hơn nhưng được nén và được sử dụng trên một trang web sử dụng các ngày có bit công bằng sẽ là giải pháp tốt hơn! - RobertPitt
Giải pháp này cũng có sẵn dưới dạng gói npm: npmjs.com/package/dateformat - David
Có 14 sự cố mở với plugin ở trên. Ngay cả tôi đã tìm thấy một :( - Amit Kumar Gupta
tôi có require is not defined - Hooli
OP đã yêu cầu giải pháp JS - Luke Pring


Nếu bạn cần định dạng nhanh ngày của mình bằng JavaScript đơn giản, hãy sử dụng getDate, getMonth + 1, getFullYear, getHours và getMinutes:

var d = new Date();

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

// 16-5-2015 9:50

Hoặc, nếu bạn cần nó được đệm bằng số không:

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

327
2018-05-16 07:02



JavaScript đơn giản, không có thư viện - đó là những gì tôi cần! Cảm ơn bạn! - lorem monkey
Tiền tố "0" .slice (-2) thực sự là cách tốt để đảm bảo số 0 đệm. Tăng vọt - Nicholi
Thêm một giải pháp javascript nhanh và tinh khiết. - aero
@Nicholi, giải pháp tuyệt vời và sáng tạo. Cảm ơn! - aero
Cái tốt nhất làm việc cho tôi một cách hoàn hảo. Cảm ơn @sebastian - Code Spark


Vâng, điều tôi muốn là chuyển đổi ngày hôm nay thành MySQL chuỗi ngày thân thiện như 2012-06-23 và sử dụng chuỗi đó làm thông số trong một trong các truy vấn của tôi. Các giải pháp đơn giản tôi đã tìm thấy là:

var today = new Date().toISOString().slice(0, 10);

Hãy nhớ rằng giải pháp trên không không phải đưa vào tài khoản bù đắp múi giờ của bạn.

Bạn có thể cân nhắc sử dụng hàm này thay vào đó:

function toJSONLocal (date) {
    var local = new Date(date);
    local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
    return local.toJSON().slice(0, 10);
}

Điều này sẽ cung cấp cho bạn ngày chính xác trong trường hợp bạn đang thực thi mã này vào khoảng thời gian bắt đầu / kết thúc trong ngày.


303
2018-06-23 18:49



Bạn có thể làm new Date(date + " UTC") để lừa múi giờ và bạn có thể loại bỏ dòng setMinutes. Người đàn ông, javascript là bẩn - Vajk Hermecz
không tương thích Y10K :( - slang
Phiên bản tương thích Y10K: var today = new Date().toISOString().slice(0,-14) :) - Alex Shaffer
Hay như thế này new Date().toISOString().split('T')[0] - rofrol
Câu trả lời tuyệt vời, và cho bản ghi không ai sẽ sử dụng máy tính trong năm 10.000. "1 và 0? Kẻ ngu! Không có gì lạ khi họ chết." - Geek Stocks


Nếu bạn là đã sử dụng giao diện người dùng jQuery trong dự án của bạn, bạn có thể làm theo cách này:

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

// formatted will be 'Jul 8, 2014'

Một số tùy chọn định dạng ngày datepicker để chơi có sẵn đây.


157
2017-07-09 13:52



Như tôi đã nói - nếu jQueryUI được sử dụng trong dự án đã có - tại sao không sử dụng lại chức năng định dạng ngày datepicker? Xin chào các bạn, tôi không hiểu vì sao tôi lại bị bỏ phiếu phủ định trong câu trả lời của mình? Vui lòng giải thích. - Dmitry Pavlov
Có thể là do ai đó có thể bao gồm jQuery UI chỉ cho chức năng định dạng ngày, hoặc có thể là do datepicker là một phần tùy chọn của thư viện, nhưng có lẽ đó là vì ghét jQuery là thời trang. - sennett
Tôi không nghĩ rằng có thể hoàn toàn tránh được mọi quyết định kỳ lạ mà ai đó có thể làm do nhầm lẫn hoặc do vô nghĩa. - Dmitry Pavlov
@sennett: Ghét jQuery là thời trang? Vì vậy, là đi bộ xung quanh với quần của bạn nửa chừng xuống chân của bạn, tôi giả sử ... đó là khá nhiều những gì đang cố gắng để mã mà không cần jQuery giống như cho hầu hết lịch sử của JavaScript ... - Michael Scheper
Trong mọi trường hợp, đây là một câu trả lời hữu ích và hoàn toàn hợp lý - một lần nữa, 70% trang web sử dụng jQuery. Nó không nên được downvoted vì niềm tin tôn giáo của các nhà phát triển. - Michael Scheper


Tôi nghĩ bạn có thể sử dụng phi tiêu chuẩn Phương thức ngày toLocaleFormat(formatString)

formatString: Một chuỗi định dạng có cùng định dạng mà strftime() chức năng trong C.

var today = new Date();
today.toLocaleFormat('%d-%b-%Y'); // 30-Dec-2011

Tham khảo:


113
2017-12-30 05:33



toLocaleFormat () dường như chỉ hoạt động trong Firefox. Cả IE và Chrome đều thất bại đối với tôi. - fitzgeraldsteele
Chrome có phương thức .toLocaleString ('en'). Có vẻ như trình duyệt mới hỗ trợ điều này developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - apocalypz
Đọc cảnh báo ở đây: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - Carson Reinke
đây sẽ là giải pháp tốt nhất nếu mọi người có thể thực hiện nó. damn bạn tức là / chrome - santa
@santa: Thật vậy. Có thể có lý do chính đáng là không theo dõi sự dẫn dắt của Mozilla về điều này, nhưng thực tế là ngay cả ES6 cũng không có chức năng tiêu chuẩn cho thấy nó vẫn là ngôn ngữ của hacker, chứ không phải ngôn ngữ của nhà phát triển. - Michael Scheper


Chức năng định dạng tùy chỉnh:

Đối với các định dạng cố định, một hàm đơn giản làm cho công việc. Ví dụ sau tạo định dạng quốc tế 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

Định dạng OP có thể được tạo ra như:

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

Lưu ý: Tuy nhiên, thường không phải là ý tưởng tốt để mở rộng các thư viện chuẩn JavaScript (ví dụ: bằng cách thêm hàm này vào nguyên mẫu Ngày tháng).

Một hàm nâng cao hơn có thể tạo ra đầu ra có thể định cấu hình dựa trên tham số định dạng.

Nếu viết chức năng định dạng quá dài, có rất nhiều thư viện xung quanh chức năng đó. Một số câu trả lời khác đã liệt kê chúng. Nhưng sự phụ thuộc ngày càng tăng cũng có phần ngược lại.

Các hàm định dạng ECMAScript chuẩn:

Vì các phiên bản ECMAScript gần đây hơn, Date lớp có một số chức năng định dạng cụ thể:

toDateString: Thực hiện phụ thuộc, chỉ hiển thị ngày tháng.

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: Hiển thị ngày và giờ 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: Stringifier cho 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: Phụ thuộc thực hiện, một ngày ở định dạng địa phương.

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

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

toLocaleString: Phụ thuộc thực hiện, ngày và giờ ở định dạng ngôn ngữ.

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: Thực hiện phụ thuộc, một thời gian ở định dạng địa phương.

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: Generic toString cho Ngày.

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)"

Lưu ý: có thể tạo đầu ra tùy chỉnh ra khỏi các định dạng đó>

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

Đoạn trích mẫu:

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));


113
2018-04-12 09:09



tuyệt vời!....... - deFreitas
giải pháp tài liệu tốt nhất trong JS như OP hỏi. Tốt đẹp! - AXL


JavaScript đơn giản là lựa chọn tốt nhất cho các onetimers nhỏ.

Mặt khác, nếu bạn cần thêm nội dung ngày, MomentJS là một giải pháp tuyệt vời.

Ví dụ:

moment().format('YYYY-MM-DD HH:m:s');     // now() -> 2015-03-24 14:32:20
moment("20111031", "YYYYMMDD").fromNow(); // 3 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 3 years ago
moment().startOf('day').fromNow();        // 11 hours ago
moment().endOf('day').fromNow();          // in 13 hours

89
2017-12-24 10:15



Tôi nghĩ bạn có thể sẽ cần thêm nhiều thứ nữa !! - morhook