Cara memformat tanggal JavaScript


2222

Dalam JavaScript, bagaimana saya bisa memformat objek tanggal untuk dicetak 10-Aug-2010?


204
Seperti biasa: Waspadalah, BULAN INI NOL-INDEKS! Jadi Januari nol, bukan satu ...
Christophe Roussy

12
Waspadalah juga, myDate.getDay()tidak mengembalikan hari dalam seminggu, tetapi lokasi hari kerja terkait dengan minggu itu. myDate.getDate()mengembalikan hari kerja saat ini .
Jimenemex

3
Untuk memformat DateTimes dalam javascript gunakan Intl.DateTimeFormatobjek. Saya jelaskan di posting saya: Posting . Saya membuat solusi online untuk jawaban Anda dengan Intl.DateTimeFormat Periksa Daring
Iman Bahrampour

5
Anda dapat menggunakantoLocaleDateString
onmyway133

12
Butuh javascript begitu lama untuk mendapatkan URL sebagai objek standar, di mana Anda dapat mencabut kunci param kueri, mengambil protokol, mengambil domain tingkat atas, dll. Mereka dapat membuat ES6 ES7 tetapi masih tidak bisa hanya menetapkan tanggal standar pemformat waktu / pengurai pada tahun 2019? Seolah-olah mereka berpikir "hmmm ya ... siapa yang menggunakan javascript akan perlu berurusan dengan waktu dan tanggal secara teratur ...."
ahnbizcad

Jawaban:


1291

Untuk format tanggal terbatas kustom, Anda harus mengeluarkan komponen tanggal (atau waktu) dari DateTimeFormatobjek (yang merupakan bagian dari API Internasionalisasi ECMAScript ), dan kemudian secara manual membuat string dengan pembatas yang Anda inginkan.

Untuk melakukan ini, Anda dapat menggunakan DateTimeFormat#formatToParts:

const date = new Date('2010-08-05')
const dateTimeFormat = new Intl.DateTimeFormat('en', { year: 'numeric', month: 'short', day: '2-digit' }) 
const [{ value: month },,{ value: day },,{ value: year }] = dateTimeFormat .formatToParts(date ) 

console.log(`${day}-${month}-${year }`)
console.log(`${day}👠${month}👢${year}`) // just for fun

Anda juga bisa mengeluarkan bagian-bagian DateTimeFormatsatu per satu menggunakan DateTimeFormat#format, tetapi perhatikan bahwa ketika menggunakan metode ini, per Maret 2020, ada bug dalam implementasi ECMAScript ketika datang untuk memimpin nol pada menit dan detik (bug ini dielakkan dengan pendekatan di atas).

const d = new Date('2010-08-05')
const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d)
const mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d)
const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d)

console.log(`${da}-${mo}-${ye}`)

Ketika bekerja dengan tanggal dan waktu, biasanya layak menggunakan perpustakaan (mis. Moment.js , luxon ) karena banyak kompleksitas tersembunyi dari lapangan.

Perhatikan bahwa API Internasionalisasi Script ECMAS, yang digunakan dalam solusi di atas tidak didukung di IE10 ( 0,03% pangsa pasar browser global pada Februari 2020).


370
Pertimbangkan untuk menggunakan perpustakaan seperti Moment.js atau Date.js. Masalah ini telah dipecahkan berulang kali.
Benjamin Oakes

242
Mengapa mereka tidak menyertakan fungsi dalam Dateobjek untuk melakukan ini?
Nayan

68
Satu poin penting adalah bahwa metode getMonth () mengembalikan indeks bulan berbasis 0 jadi misalnya Januari akan kembali 0 Februari akan mengembalikan 1, dll ...
Marko

628
moment.js 2.9.0 adalah 11.6k gzipped, contoh ini adalah 211 byte gzipped.
mrzmyr

26
Harus dicatat bahwa Anda seharusnya tidak pernah, menggunakan document.write (). Masalah keamanan dan kinerja yang sangat besar.
Matt Jensen

2009

Jika Anda perlu sedikit kontrol atas pemformatan daripada jawaban yang saat ini diterima, Date#toLocaleDateStringdapat digunakan untuk membuat rendering khusus lokal standar. The localedan optionsargumen membiarkan aplikasi menentukan bahasa yang format konvensi harus digunakan, dan memungkinkan beberapa kustomisasi rendering.

Contoh kunci opsi:

  1. hari:
    Representasi hari itu.
    Nilai yang mungkin adalah "numerik", "2 digit".
  2. hari kerja:
    Representasi hari kerja.
    Nilai yang mungkin adalah "sempit", "pendek", "panjang".
  3. tahun:
    Representasi tahun.
    Nilai yang mungkin adalah "numerik", "2 digit".
  4. bulan:
    Representasi bulan.
    Nilai yang mungkin adalah "numerik", "2 digit", "sempit", "pendek", "panjang".
  5. jam:
    Representasi jam.
    Nilai yang mungkin adalah "numerik", "2 digit".
  6. menit: Representasi menit.
    Nilai yang mungkin adalah "numerik", "2 digit".
  7. kedua:
    Representasi yang kedua.
    Nilai yang mungkin adalah "numerik", 2 digit ".

Semua kunci ini opsional. Anda dapat mengubah jumlah nilai opsi berdasarkan kebutuhan Anda, dan ini juga akan mencerminkan keberadaan setiap jangka waktu tanggal.

Catatan: Jika Anda hanya ingin mengonfigurasi opsi konten, tetapi masih menggunakan lokal saat ini, melewati nulluntuk parameter pertama akan menyebabkan kesalahan. Gunakan undefinedsebagai gantinya.

Untuk berbagai bahasa:

  1. "en-US": Untuk bahasa Inggris
  2. "hi-IN": Untuk bahasa Hindi
  3. "ja-JP": Untuk Jepang

Anda dapat menggunakan lebih banyak opsi bahasa.

Sebagai contoh

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

Anda juga dapat menggunakan toLocaleString()metode ini untuk tujuan yang sama. Satu-satunya perbedaan adalah fungsi ini menyediakan waktu ketika Anda tidak melewatkan opsi apa pun.

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

Referensi:


45
Hampir akan digunakan moment.jsuntuk format sederhana. Untungnya melakukan pencarian google tambahan dan menemukan sudah ada API asli yang melakukan ini. Menyimpan ketergantungan eksternal. Luar biasa!
LeOn - Han Li

21
Sepertinya jawaban ini harus menjadi jawaban "saat ini" terbaik. Juga menggunakan opsi "hour12: true" untuk menggunakan format 12 jam vs 24 jam. Mungkin harus ditambahkan ke daftar ringkasan Anda di jawabannya.
Doug Knudsen

14
Saya tidak mendapatkan jawaban atas jawaban ini. Itu tidak memecahkan masalah dalam pertanyaan. (Yaitu beri saya tanggal yang terlihat seperti 10-Agustus-2010). Menggunakan toLocaleDateString () yang cukup sulit. Perpustakaan date.format tampaknya menjadi solusi yang lebih baik (setidaknya untuk pengguna Node)
Iarwa1n

3
Jika meneruskan undefinedsebagai parameter lokal pertama terasa sewenang-wenang, Anda dapat meneruskan nilai "default"untuk menggunakan pengaturan lokal browser, per MDN docs developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
wbharding

3
@ Iarwa1n Jawaban ini belum disebutkan tetapi Anda dapat menggunakan toLocaleDateString untuk mengembalikan hanya bagian-bagian tertentu yang kemudian dapat Anda gabung sesuai keinginan. Periksa jawaban saya di bawah ini. date.toLocaleDateString("en-US", { day: 'numeric' }) + "-"+ date.toLocaleDateString("en-US", { month: 'short' }) + "-" + date.toLocaleDateString("en-US", { year: 'numeric' })harus memberi16-Nov-2019
K Vij

609

Gunakan perpustakaan date.format :

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

pengembalian:

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

format tanggal pada npm

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


4
ini mungkin tampak seperti solusi yang lebih lama tetapi dikompresi dan digunakan di situs yang menggunakan tanggal sedikit adil akan menjadi solusi yang lebih baik!
RobertPitt

5
Solusi ini juga tersedia sebagai paket npm
David

19
Ada 14 masalah terbuka dengan plugin di atas. Bahkan saya menemukan satu :(
Amit Kumar Gupta

6
Saya mendapatkanrequire is not defined
Hooli

16
OP meminta solusi JS
Luke Pring

523

Jika Anda perlu cepat memformat tanggal menggunakan plain JavaScript, penggunaan getDate, getMonth + 1, getFullYear, getHoursdan getMinutes:

var d = new Date();

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

// 16-5-2015 9:50

Atau, jika Anda perlu diisi dengan nol:

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

Bisakah Anda memberi tahu cara mendapatkan format seperti Senin, 23 Maret 2018 ??
Sachin HR

@SachinHR, lihat jawaban sebelumnya: stackoverflow.com/a/34015511/4161032 . The toLocaleDateString()dapat memformat tanggal menggunakan lokal nama bulan / hari.
sebastian.i

12
Anda juga dapat membuat angka nol dengan.toString().padStart(2, '0')
Benny Jobigan

1
@DmitryoN, jika perlu, tahun ini dapat diisi dengan cara yang sama:("000" + d.getFullYear()).slice(-4)
sebastian.i

4
@ BennyJobigan Harus disebutkan bahwa String.padStart()hanya tersedia dari ECMAScript 2017.
JHH

413

Yah, yang saya inginkan adalah mengubah tanggal hari ini menjadi string tanggal yang ramah MySQL seperti 2012-06-23, dan menggunakan string itu sebagai parameter di salah satu pertanyaan saya. Solusi sederhana yang saya temukan adalah ini:

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

Perlu diingat bahwa solusi di atas tidak tidak memperhitungkan zona waktu Anda offset.

Anda dapat mempertimbangkan menggunakan fungsi ini sebagai gantinya:

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

Ini akan memberi Anda tanggal yang benar jika Anda mengeksekusi kode ini sekitar awal / akhir hari.


9
Anda dapat melakukannya new Date(date + " UTC")untuk mengelabui zona waktu, dan Anda dapat menghilangkan garis setMinutes. Man, javascript kotor
Vajk Hermecz

23
Versi yang kompatibel Y10K: var today = new Date().toISOString().slice(0,-14):)
Alex Shaffer

23
Atau seperti ininew Date().toISOString().split('T')[0]
rofrol

4
new Date().toISOString().slice(0, 16).replace('T',' ')untuk memasukkan waktu
Gerrie van Wyk

3
Hanya berkomentar bahwa kurangnya zona waktu bukanlah ketidaknyamanan kecil "sekitar awal / akhir hari". Di Australia, misalnya, tanggalnya mungkin salah hingga sekitar jam 11 pagi - hampir setengah hari!
Steve Bennett

230

Fungsi pemformatan khusus:

Untuk format tetap, fungsi sederhana membuat pekerjaan. Contoh berikut menghasilkan format internasional 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

Format OP dapat dihasilkan seperti:

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

Catatan: Namun, biasanya bukan ide yang baik untuk memperluas pustaka standar JavaScript (misalnya dengan menambahkan fungsi ini ke prototipe Tanggal).

Fungsi yang lebih maju dapat menghasilkan output yang dapat dikonfigurasi berdasarkan parameter format.

Jika menulis fungsi pemformatan terlalu panjang, ada banyak pustaka yang dapat melakukannya. Beberapa jawaban lain sudah menyebutkannya. Tetapi meningkatnya ketergantungan juga menjadikannya bagian-lawan.

Fungsi pemformatan ECMAScript standar:

Karena versi ECMAScript yang lebih baru, Datekelas memiliki beberapa fungsi pemformatan khusus:

toDateString : Ketergantungan implementasi, hanya tampilkan tanggal.

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 : Tampilkan tanggal dan waktu 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 untuk 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 : Ketergantungan implementasi, tanggal dalam format lokal.

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

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

toLocaleString : Ketergantungan implementasi, tanggal & waktu dalam format lokal.

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 : Ketergantungan implementasi, waktu dalam format lokal.

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 Umum untuk Tanggal.

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

Catatan: dimungkinkan untuk menghasilkan output khusus dari format tersebut>

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

Cuplikan contoh:

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


3
Terima kasih untuk yang terakhir .. Berguna untuk mengatur nilai tanggal input Tanggal HTML.
DaCoda

new Date().toLocaleDateString()memberi Anda mm/dd/yyyytidak dd/mm/yyyytolong perbaiki yang itu.
Aarvy

1
@RajanVerma: toLocaleDateString menyediakan lokal Anda, yang mungkin mm / hh / tttt karena Anda berada di AS. Di sini, lokal untuk tanggal adalah dd / mm / yyyy (itulah titik "lokal"). Saya menulis "eg" karena ini bukan spesifikasi, tetapi contoh dari output.
Adrian Maire

177

Jika Anda sudah menggunakan jQuery UI di proyek Anda, Anda bisa melakukannya dengan cara ini:

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

// formatted will be 'Jul 8, 2014'

Beberapa opsi format tanggal datepicker untuk bermain dengan tersedia di sini .


13
Seperti yang saya katakan - jika jQueryUI sudah digunakan dalam proyek - mengapa tidak menggunakan kembali fungsi format tanggal datepicker? Hai teman-teman, saya tidak menggaris bawahi mengapa saya mendapatkan suara negatif pada jawaban saya? Tolong jelaskan.
Dmitry Pavlov

7
Mungkin karena seseorang dapat memasukkan jQuery UI hanya untuk fungsi format tanggal, atau mungkin karena datepicker adalah bagian opsional dari perpustakaan, tetapi mungkin itu karena membenci jQuery modis.
sennett

12
Saya pikir tidak mungkin untuk sepenuhnya menghindari semua keputusan aneh yang bisa dilakukan seseorang secara tidak sengaja atau tanpa akal sehat.
Dmitry Pavlov

7
@sennett: Benci jQuery modis? Jadi berjalan-jalan dengan celana Anda setengah jalan, saya kira ... yang cukup banyak seperti apa mencoba kode tanpa jQuery seperti untuk sebagian besar sejarah JavaScript ...
Michael Scheper

5
Bagaimanapun, ini adalah jawaban yang bermanfaat dan sepenuhnya masuk akal — sekali lagi, 70% situs web menggunakan jQuery. Seharusnya tidak diturunkan karena keyakinan agama pengembang.
Michael Scheper

133

Saya pikir Anda bisa menggunakan metode Tanggal yang tidak standartoLocaleFormat(formatString)

formatString: String format dalam format yang sama yang diharapkan oleh strftime()fungsi dalam C.

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

Referensi:


160
toLocaleFormat () tampaknya hanya berfungsi di Firefox. Baik IE dan Chrome gagal untuk saya.
fitzgeraldsteele

16
Chrome memiliki metode .toLocaleString ('en'). Sepertinya peramban baru mendukung pengembang
ini.mozilla.org/en-US/docs/Web/JavaScript/Reference/…


6
ini akan menjadi solusi terbaik jika semua orang dapat menerapkannya. damn you ie / chrome
santa

6
@ Santa: Memang. Mungkin ada alasan yang adil untuk tidak mengikuti jejak Mozilla dalam hal ini, tetapi fakta bahwa bahkan ES6 tidak memiliki fungsi standar untuk ini menunjukkan bahwa itu masih bahasa peretas, bukan bahasa pengembang.
Michael Scheper

105

JavaScript polos adalah pilihan terbaik untuk pencetus kecil.

Di sisi lain, jika Anda membutuhkan lebih banyak barang kencan, MomentJS adalah solusi yang bagus.

Sebagai contoh:

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

2
Penting untuk disebutkan: jangan gunakan YYYYkecuali Anda tahu perbedaan antara YYYYdan yyyy: stackoverflow.com/questions/15133549/…
Domin

@Domin yang khusus untuk NSDateFormatter di iOS, seperti yang digunakan dari misalnya Objective-C atau Swift. Pertanyaan ini adalah tentang Javascript di browser, dan jawaban ini menggunakan MomentJS, di mana YYYY(bukan yyyy) adalah tahun standar dan GGGG(bukan YYYY) adalah tahun berbasis minggu ISO.
Mark Reed

2
Momen adalah 100% tidak usang @Gerry
Liam

97

Di browser modern (*) , Anda bisa melakukan ini:

var today = new Date().toLocaleDateString('en-GB', {
    day : 'numeric',
    month : 'short',
    year : 'numeric'
}).split(' ').join('-');

Output jika dieksekusi hari ini (24 Januari, 2016):

'24-Jan-2016'

(*) Menurut MDN , "browser modern" berarti Chrome 24+, Firefox 29+, Internet Explorer 11, Edge 12+, Opera 15+ & Safari nightly build .


Apakah ada cara untuk memeriksa apakah fungsi ini didukung dan jika tidak, default ke solusi yang lebih sederhana?
James Wierzba

@ JamesWierzba: Anda bisa menggunakan polyfill ini !
John Slegers

Ini bahkan tidak terdaftar di caniuse.com: /
Charles Wood

51

Anda harus melihat di date.js . Ini menambahkan banyak pembantu yang nyaman untuk bekerja dengan tanggal, misalnya, dalam kasus Anda:

var date = Date.parse('2010-08-10');
console.log(date.toString('dd-MMM-yyyy'));

Persiapan: http://www.datejs.com/2007/11/27/getting-started-with-datejs/


Terima kasih. Ini adalah perpustakaan yang sangat komprehensif dan lengkap, dengan tapak kecil.
mitcheljh

Saya pikir saat ini saya mendapatkan nomor dari Date.parse sementara biarkan date = Date baru (fromString) memiliki lebih banyak fungsi. Sayangnya toString saya juga tampaknya hanya menampilkan default tanpa menafsirkan argumen yang lulus untuk memformatnya. Menggunakan NodeJS 11+ toDateString adalah output yang lebih pendek tetapi tidak mengambil format. Yang saya lihat adalah toLocaleDateString yang sangat berbelit-belit
Master James

38

Saya bisa mendapatkan format yang Anda minta dalam satu baris tanpa perpustakaan dan tanpa metode Tanggal, cukup regex:

var d = (new Date()).toString().replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/,'$2-$1-$3');
// date will be formatted as "14-Oct-2015" (pass any date object in place of 'new Date()')

Dalam pengujian saya, ini bekerja dengan andal di browser utama (Chrome, Safari, Firefox, dan IE.) Seperti yang ditunjukkan @RobG, output Date.prototype.toString () bergantung pada implementasi, jadi cukup uji output untuk memastikan ini berfungsi tepat di mesin JavaScript Anda. Anda bahkan dapat menambahkan beberapa kode untuk menguji output string dan pastikan itu cocok dengan apa yang Anda harapkan sebelum Anda melakukan penggantian regex.


console.log(new Date().toString().replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/,'$2-$1-$3'));
John

@ André - Saya setuju. Jika ini adalah kode saya, saya pasti akan menyertakan komentar di sampingnya yang menjelaskan regex dan memberikan contoh input dan output yang sesuai.
JD Smith

bagaimana dengan bagian waktu (HH: mm: dd)?
unruledboy

@unruledboy var d = (Tanggal baru ()). toString (). ganti (/ \ S + \ s (\ S +) \ s (\ d +) \ s (\ d +) \ s (\ S +) \ s. * / , '$ 2- $ 1- $ 3 $ 4'); - atau untuk mendapatkan bagian waktu tanpa tanggal itu sendiri, gunakan: var d = (Tanggal baru ()). toString (). ganti (/ \ S + \ s (\ S +) \ s (\ d +) \ s (\ d +) \ s (\ S +) \ s. * /, '$ 4');
JD Smith

37

@ Sébastien - alternatif semua dukungan browser

new Date(parseInt(496407600)*1000).toLocaleDateString('de-DE', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
}).replace(/\./g, '/');

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


5
Alih-alih melakukan .replace (), Anda cukup menggunakan 'en-GB' sebagai lokal. :)
Roberto14

1
Ini sangat bagus, misalnya new Date().toLocaleDateString("en-EN", {month: "short", weekday: "short", day: "2-digit", year: "numeric"})pengembalian"Wed, Sep 06, 2017"
Peter T.

37

OK , kami mendapatkan sesuatu yang disebut Intl yang sangat berguna untuk memformat tanggal di JavaScript hari ini:

Tanggal Anda seperti di bawah ini:

var date = '10/8/2010';

Dan Anda berubah menjadi Tanggal dengan menggunakan Date baru () seperti di bawah ini:

date = new Date(date);

Dan sekarang Anda dapat memformatnya sesuka Anda menggunakan daftar lokal seperti di bawah ini:

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: "٨‏/١٠‏/٢٠١٠"

Jika Anda benar-benar menginginkan format yang Anda sebutkan di atas, Anda dapat melakukannya:

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

Dan hasilnya adalah:

"10-Aug-2010"

Untuk lebih lanjut, lihat API Intl dan dokumentasi Intl.DateTimeFormat .


Tidak didukung oleh IE
Pants

Tetapi hanya oleh IE11, IE10- telah keluar dari kehidupan sebelum ini ada sehingga dapat dimengerti. 92% dari caniuse, yang cukup baik caniuse.com/#search=datetimeformat
Tofandel

32

Menggunakan template string ECMAScript Edition 6 (ES6 / ES2015):

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

Jika Anda perlu mengubah pembatas:

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

30

Solusi Terpaket : Luxon

Jika Anda ingin menggunakan satu solusi untuk semua, saya sangat merekomendasikan menggunakan Luxon (versi modern dari Moment.js ) yang juga memformat di banyak bahasa / bahasa dan banyak fitur lainnya.

Luxon di-host di situs web Moment.js dan dikembangkan oleh pengembang Moment.js karena Moment.js memiliki keterbatasan yang ingin ditangani oleh pengembang tetapi tidak bisa.

Untuk memasang:

npm install luxonatau yarn add luxon(tautan kunjungi untuk metode pemasangan lainnya)

Contoh:

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

Hasil:

10-Agu-2010

Solusi Manual

Dengan menggunakan format yang sama seperti Moment.js, Class DateTimeFormatter (Java) , dan Class SimpleDateFormat (Java) , saya menerapkan solusi komprehensif di formatDate(date, patternStr)mana kode mudah dibaca dan dimodifikasi. Anda dapat menampilkan tanggal, waktu, AM / PM, dll. Lihat kode untuk contoh lebih lanjut.

Contoh:

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

( formatDatediterapkan dalam cuplikan kode di bawah)

Hasil:

Jumat, 12 Oktober 2018 18: 11: 23: 445

Coba kode dengan mengklik "Jalankan cuplikan kode."

Pola Tanggal dan Waktu

yy= 2 digit tahun; yyyy= setahun penuh

M= digit bulan; MM= 2 digit bulan; MMM= nama bulan pendek; MMMM= nama bulan penuh

EEEE= nama hari kerja penuh; EEE= nama hari kerja pendek

d= hari digit; dd= 2 digit hari

h= jam pagi / malam; hh= 2 digit jam pagi / malam; H= jam; HH= 2 digit jam

m= menit; mm= 2 digit menit; aaa= Pagi / sore

s= detik; ss= 2 digit detik

S = milidetik

var monthNames = [
  "January", "February", "March", "April", "May", "June", "July",
  "August", "September", "October", "November", "December"
];
var dayOfWeekNames = [
  "Sunday", "Monday", "Tuesday",
  "Wednesday", "Thursday", "Friday", "Saturday"
];
function formatDate(date, 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(),
        miliseconds = date.getMilliseconds(),
        h = hour % 12,
        hh = twoDigitPad(h),
        HH = twoDigitPad(hour),
        mm = twoDigitPad(minute),
        ss = twoDigitPad(second),
        aaa = hour < 12 ? 'AM' : 'PM',
        EEEE = dayOfWeekNames[date.getDay()],
        EEE = EEEE.substr(0, 3),
        dd = twoDigitPad(day),
        M = month + 1,
        MM = twoDigitPad(M),
        MMMM = monthNames[month],
        MMM = MMMM.substr(0, 3),
        yyyy = year + "",
        yy = yyyy.substr(2, 2)
    ;
    // checks to see if month name will be used
    patternStr = patternStr
      .replace('hh', hh).replace('h', h)
      .replace('HH', HH).replace('H', hour)
      .replace('mm', mm).replace('m', minute)
      .replace('ss', ss).replace('s', second)
      .replace('S', miliseconds)
      .replace('dd', dd).replace('d', day)
      
      .replace('EEEE', EEEE).replace('EEE', EEE)
      .replace('yyyy', yyyy)
      .replace('yy', yy)
      .replace('aaa', aaa);
    if (patternStr.indexOf('MMM') > -1) {
        patternStr = patternStr
          .replace('MMMM', MMMM)
          .replace('MMM', MMM);
    }
    else {
        patternStr = patternStr
          .replace('MM', MM)
          .replace('M', M);
    }
    return patternStr;
}
function twoDigitPad(num) {
    return num < 10 ? "0" + num : num;
}
console.log(formatDate(new Date()));
console.log(formatDate(new Date(), 'dd-MMM-yyyy')); //OP's request
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:mmaaa'));

Terima kasih @Gerry telah membesarkan Luxon.


1
Ngomong-ngomong, SimpleDateFormatkelas yang merepotkan digantikan bertahun-tahun yang lalu oleh java.time.format.DateTimeFormatterkelas.
Basil Bourque

1
@BasilBourque, perhatikan. Keduanya menggunakan pola yang sama. Saya berada di proyek pra-Java8 selama 5 tahun jadi saya tidak pernah terkena hal-hal yang lebih baru. Terima kasih!
lewdev

Lihat proyek ThreeTen-Backport untuk Java 6 & 7, untuk mendapatkan sebagian besar fungsi java.time dengan API yang hampir sama.
Basil Bourque

@BasilBourque terima kasih atas rujukannya, tapi saya tidak mengerjakan proyek itu lagi, tetapi saya pasti akan mengingat ini ketika muncul.
lewdev

2
saat sudah usang, gunakan luxon
Gerry

19

Berikut adalah beberapa kode yang baru saja saya tulis untuk menangani format tanggal untuk proyek yang sedang saya kerjakan. Ini meniru fungsi format tanggal PHP yang sesuai dengan kebutuhan saya. Jangan ragu untuk menggunakannya, itu hanya memperpanjang objek Date () yang sudah ada. Ini mungkin bukan solusi yang paling elegan tetapi ini bekerja untuk kebutuhan saya.

var d = new Date(); 
d_string = d.format("m/d/Y h:i:s");

/**************************************
 * Date class extension
 * 
 */
    // Provide month names
    Date.prototype.getMonthName = function(){
        var month_names = [
                            'January',
                            'February',
                            'March',
                            'April',
                            'May',
                            'June',
                            'July',
                            'August',
                            'September',
                            'October',
                            'November',
                            'December'
                        ];

        return month_names[this.getMonth()];
    }

    // Provide month abbreviation
    Date.prototype.getMonthAbbr = function(){
        var month_abbrs = [
                            'Jan',
                            'Feb',
                            'Mar',
                            'Apr',
                            'May',
                            'Jun',
                            'Jul',
                            'Aug',
                            'Sep',
                            'Oct',
                            'Nov',
                            'Dec'
                        ];

        return month_abbrs[this.getMonth()];
    }

    // Provide full day of week name
    Date.prototype.getDayFull = function(){
        var days_full = [
                            'Sunday',
                            'Monday',
                            'Tuesday',
                            'Wednesday',
                            'Thursday',
                            'Friday',
                            'Saturday'
                        ];
        return days_full[this.getDay()];
    };

    // Provide full day of week name
    Date.prototype.getDayAbbr = function(){
        var days_abbr = [
                            'Sun',
                            'Mon',
                            'Tue',
                            'Wed',
                            'Thur',
                            'Fri',
                            'Sat'
                        ];
        return days_abbr[this.getDay()];
    };

    // Provide the day of year 1-365
    Date.prototype.getDayOfYear = function() {
        var onejan = new Date(this.getFullYear(),0,1);
        return Math.ceil((this - onejan) / 86400000);
    };

    // Provide the day suffix (st,nd,rd,th)
    Date.prototype.getDaySuffix = function() {
        var d = this.getDate();
        var sfx = ["th","st","nd","rd"];
        var val = d%100;

        return (sfx[(val-20)%10] || sfx[val] || sfx[0]);
    };

    // Provide Week of Year
    Date.prototype.getWeekOfYear = function() {
        var onejan = new Date(this.getFullYear(),0,1);
        return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
    } 

    // Provide if it is a leap year or not
    Date.prototype.isLeapYear = function(){
        var yr = this.getFullYear();

        if ((parseInt(yr)%4) == 0){
            if (parseInt(yr)%100 == 0){
                if (parseInt(yr)%400 != 0){
                    return false;
                }
                if (parseInt(yr)%400 == 0){
                    return true;
                }
            }
            if (parseInt(yr)%100 != 0){
                return true;
            }
        }
        if ((parseInt(yr)%4) != 0){
            return false;
        } 
    };

    // Provide Number of Days in a given month
    Date.prototype.getMonthDayCount = function() {
        var month_day_counts = [
                                    31,
                                    this.isLeapYear() ? 29 : 28,
                                    31,
                                    30,
                                    31,
                                    30,
                                    31,
                                    31,
                                    30,
                                    31,
                                    30,
                                    31
                                ];

        return month_day_counts[this.getMonth()];
    } 

    // format provided date into this.format format
    Date.prototype.format = function(dateFormat){
        // break apart format string into array of characters
        dateFormat = dateFormat.split("");

        var date = this.getDate(),
            month = this.getMonth(),
            hours = this.getHours(),
            minutes = this.getMinutes(),
            seconds = this.getSeconds();
        // get all date properties ( based on PHP date object functionality )
        var date_props = {
            d: date < 10 ? '0'+date : date,
            D: this.getDayAbbr(),
            j: this.getDate(),
            l: this.getDayFull(),
            S: this.getDaySuffix(),
            w: this.getDay(),
            z: this.getDayOfYear(),
            W: this.getWeekOfYear(),
            F: this.getMonthName(),
            m: month < 10 ? '0'+(month+1) : month+1,
            M: this.getMonthAbbr(),
            n: month+1,
            t: this.getMonthDayCount(),
            L: this.isLeapYear() ? '1' : '0',
            Y: this.getFullYear(),
            y: this.getFullYear()+''.substring(2,4),
            a: hours > 12 ? 'pm' : 'am',
            A: hours > 12 ? 'PM' : 'AM',
            g: hours % 12 > 0 ? hours % 12 : 12,
            G: hours > 0 ? hours : "12",
            h: hours % 12 > 0 ? hours % 12 : 12,
            H: hours,
            i: minutes < 10 ? '0' + minutes : minutes,
            s: seconds < 10 ? '0' + seconds : seconds           
        };

        // loop through format array of characters and add matching data else add the format character (:,/, etc.)
        var date_string = "";
        for(var i=0;i<dateFormat.length;i++){
            var f = dateFormat[i];
            if(f.match(/[a-zA-Z]/g)){
                date_string += date_props[f] ? date_props[f] : '';
            } else {
                date_string += f;
            }
        }

        return date_string;
    };
/*
 *
 * END - Date class extension
 * 
 ************************************/

18

Solusi JavaScript tanpa menggunakan perpustakaan eksternal apa pun:

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)



15

Kami memiliki banyak solusi untuk ini, tetapi saya pikir yang terbaik dari mereka adalah Moment.js. Jadi saya pribadi menyarankan untuk menggunakan Moment.js untuk operasi tanggal dan waktu.

console.log(moment().format('DD-MMM-YYYY'));
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>


kenapa kamu termasuk jquery?
Ced

1
Ohh maaf itu tidak perlu. Terima kasih @Ced
Vijay Maheriya

bagaimana cara memberikan tanggal yang saya miliki untuk moment.js? Saya pikir itu selalu membutuhkan waktu saat ini.
Dave Ranjan

1
@ DaveRanjan saya pikir Anda perlu mengubah tanggal kustom Anda. Jadi gunakan ini: format console.log (moment ('2016-08-10'). ('DD-MMM-YYYY'));
Vijay Maheriya

Ya, menemukan jawabannya nanti. Terima kasih :)
Dave Ranjan

15

Cara yang berguna dan fleksibel untuk memformat DateTimes dalam JavaScript adalah Intl.DateTimeFormat:

var date = new Date();
var options = { year: 'numeric', month: 'short', day: '2-digit'};
var _resultDate = new Intl.DateTimeFormat('en-GB', options).format(date);
// The _resultDate is: "12 Oct 2017"
// Replace all spaces with - and then log it.
console.log(_resultDate.replace(/ /g,'-'));

Hasilnya adalah: "12-Oct-2017"

Format tanggal dan waktu dapat dikustomisasi menggunakan argumen opsi.

Itu Intl.DateTimeFormat objek adalah konstruktor untuk objek yang memungkinkan bahasa tanggal sensitif dan format waktu.

Sintaksis

new Intl.DateTimeFormat([locales[, options]])
Intl.DateTimeFormat.call(this[, locales[, options]])

Parameter

lokal

Pilihan. Sebuah string dengan tag bahasa BCP 47, atau array dari string tersebut. Untuk bentuk umum dan interpretasi argumen locales, lihat halaman Intl. Kunci ekstensi Unicode berikut diizinkan:

nu
Numbering system. Possible values include: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".
ca
Calendar. Possible values include: "buddhist", "chinese", "coptic", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc".

Pilihan

Pilihan. Objek dengan beberapa atau semua properti berikut:

localeMatcher

Algoritma pencocokan lokal untuk digunakan. Nilai yang mungkin adalah "lookup"dan "best fit"; standarnya adalah "best fit". Untuk informasi tentang opsi ini, lihat halaman Intl.

zona waktu

Zona waktu untuk digunakan. Satu-satunya implementasi nilai yang harus dikenali adalah "UTC"; default adalah zona waktu default runtime. Implementasi juga dapat mengenali nama-nama zona waktu dari waktu IANA database zona, seperti "Asia/Shanghai", "Asia/Kolkata","America/New_York" .

jam12

Apakah akan menggunakan waktu 12 jam (dibandingkan dengan waktu 24 jam). Nilai yang mungkin adalah truedan false; standarnya adalah tergantung lokal.

formatMatcher

Algoritma pencocokan format untuk digunakan. Nilai yang mungkin adalah "basic"dan "best fit"; standarnya adalah "best fit". Lihat paragraf berikut untuk informasi tentang penggunaan properti ini.

Properti berikut menjelaskan komponen tanggal-waktu untuk digunakan dalam output yang diformat dan representasi yang diinginkan. Implementasi diperlukan untuk mendukung setidaknya subset berikut:

weekday, year, month, day, hour, minute, second
weekday, year, month, day
year, month, day
year, month
month, day
hour, minute, second
hour, minute

Implementasi dapat mendukung himpunan bagian lainnya, dan permintaan akan dinegosiasikan dengan semua kombinasi subset-representasi yang tersedia untuk menemukan yang paling cocok. Dua algoritma tersedia untuk negosiasi ini dan dipilih oleh properti formatMatcher: "basic"Algoritme yang ditentukan sepenuhnya dan algoritma "cocok paling cocok" tergantung implementasi.

hari kerja

Representasi hari kerja. Nilai yang mungkin adalah "narrow", "short", "long".

zaman

Representasi era. Nilai yang mungkin adalah "narrow", "short", "long".

tahun

Representasi tahun ini. Nilai yang mungkin adalah "numeric", "2-digit".

bulan

Representasi bulan. Nilai yang mungkin adalah "numeric", "2-digit", "narrow", "short", "long".

hari

Representasi hari itu. Nilai yang mungkin adalah "numeric", "2-digit".

jam

Representasi jam. Nilai yang mungkin adalah "numeric", "2-digit".

menit

Representasi menit. Nilai yang mungkin adalah "numeric", "2-digit".

kedua

Representasi yang kedua. Nilai yang mungkin adalah "numeric", "2-digit".

timeZoneName

Representasi nama zona waktu. Nilai yang mungkin adalah "short", "long". Nilai default untuk setiap properti komponen tanggal-waktu tidak ditentukan, tetapi jika semua properti komponen tidak ditentukan, maka tahun, bulan, dan hari diasumsikan menjadi "numeric".

Periksa Daring

Keterangan lebih lanjut


15

Ini dapat membantu masalah:

var d = new Date();

var options = {   
    day: 'numeric',
    month: 'long', 
    year: 'numeric'
};

console.log(d.toLocaleDateString('en-ZA', options));

Tanggal untuk mencari format


2
atau d.toLocaleDateString('en-US', options);jika Anda berada di AS.
BishopZ

Ini solusi saya. Terima kasih.
Steven Rogers

13

Ini adalah bagaimana saya menerapkan plugin npm saya

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

Paket mana yang Anda maksud?
lbrahim

Ini memiliki bug: Nama bulan diganti pertama, maka nama bulan akan diganti juga. Misalnya Marchakan menjadi 3archdengan kode ini.
ntaso

1
Ubah baris 'M'menjadi format = format.replace("M(?!M)", (dt.getMonth()+1).toString());dan letakkan di atas baris dengan'MMMM'
ntaso

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

8

Sugar.js memiliki ekstensi luar biasa untuk objek Date, termasuk format Date.form metode .

Contoh dari dokumentasi:

Date.create().format('{Weekday} {Month} {dd}, {yyyy}');

Date.create().format('{12hr}:{mm}{tt}')

8

Untuk siapa pun yang mencari solusi ES6 yang sangat sederhana untuk menyalin, menempel, dan mengadopsi:

const dateToString = d => `${d.getFullYear()}-${('00' + (d.getMonth() + 1)).slice(-2)}-${('00' + d.getDate()).slice(-2)}` 

// how to use:
const myDate = new Date(Date.parse('04 Dec 1995 00:12:00 GMT'))
console.log(dateToString(myDate)) // 1995-12-04


8

Pada 2019, sepertinya Anda bisa mendapatkan toLocaleDateString untuk mengembalikan hanya bagian-bagian tertentu dan kemudian Anda dapat bergabung dengan mereka sesuai keinginan:

var date = new Date();

console.log(date.toLocaleDateString("en-US", { day: 'numeric' }) 
            + "-"+ date.toLocaleDateString("en-US", { month: 'short' })
            + "-" + date.toLocaleDateString("en-US", { year: 'numeric' }) );

> 16-Nov-2019

console.log(date.toLocaleDateString("en-US", { month: 'long' }) 
            + " " + date.toLocaleDateString("en-US", { day: 'numeric' }) 
            + ", " + date.toLocaleDateString("en-US", { year: 'numeric' }) );

> November 16, 2019

8

Anda harus melihat DayJs Ini adalah remake dari momentJs tetapi arsitektur modular yang berorientasi lebih ringan.

Alternatif 2kB cepat untuk Moment.js dengan API modern yang sama

Day.js adalah pustaka JavaScript minimalis yang mem-parsing, memvalidasi, memanipulasi, dan menampilkan tanggal dan waktu untuk peramban modern dengan API yang sebagian besar kompatibel dengan Moment.js. Jika Anda menggunakan Moment.js, Anda sudah tahu cara menggunakan Day.js.

var date = Date.now();
const formatedDate = dayjs(date).format("YYYY-MM-DD")
console.log(formatedDate);
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.16/dayjs.min.js" crossorigin="anonymous"></script>


7

Untuk mendapatkan "10-Agu-2010", coba:

var date = new Date('2010-08-10 00:00:00');
date = date.toLocaleDateString(undefined, {day:'2-digit'}) + '-' + date.toLocaleDateString(undefined, {month:'short'}) + '-' + date.toLocaleDateString(undefined, {year:'numeric'})

Untuk dukungan browser, lihat toLocaleDateString .


Saya tidak memerlukan "-", ini adalah versi yang lebih pendek dengan waktu, tanggal dan zona waktu! date = Date baru (); date.toLocaleDateString (tidak ditentukan, {hari: '2-digit', bulan: 'pendek', tahun: 'numerik', jam: 'numerik', menit: 'numerik', menit: 'numerik', timeZoneName: 'short'}); :)
varun
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.