Cara Definitif untuk Memformat Tanggal untuk Situs Internasional
Format tanggal berbeda-beda sesuai wilayah dan bahasa, jadi, selalu membantu jika kita dapat menemukan cara untuk menampilkan tanggal kepada pengguna, khusus untuk bahasa dan wilayah mereka.
Kembali pada bulan Desember 2012, ECMA merilis spesifikasi API Internasionalisasi untuk JavaScript. API Internasionalisasi membantu kami menampilkan data tertentu sesuai dengan bahasa dan spesifikasi cutural. Itu bisa digunakan untuk mengidentifikasi mata uang, zona waktu dan lainnya.
Dalam posting ini kita akan melihat ke dalam pemformatan tanggal menggunakan API ini.
Ketahui lokal pengguna
Untuk menunjukkan tanggal sesuai lokal yang disukai pengguna, pertama-tama kita perlu tahu apa itu lokal yang disukai. Saat ini cara paling mudah untuk mengetahui itu adalah dengan bertanya kepada pengguna; memungkinkan pengguna memilih pengaturan bahasa dan wilayah yang mereka sukai di halaman web.
Tetapi, jika itu bukan pilihan, Anda dapat menafsirkannya Bahasa Terima minta tajuk atau baca navigator.language(untuk Chrome dan Firefox) atau navigator.browserLanguage(untuk IE) nilai.
Perlu diketahui bahwa tidak semua opsi tersebut mengembalikan bahasa yang disukai dari UI browser.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "id"; // mengembalikan tag bahasa seperti 'en-GB'
Periksa API Internasionalisasi
Untuk mengetahui apakah browser mendukung API Internasionalisasi atau tidak, kami dapat memeriksa keberadaan objek global Intl.
if (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "object") // API Internasionalisasi hadir, mari kita gunakan itu Itu Intl obyek
Intl adalah objek global untuk menggunakan API Internasionalisasi. Ini memiliki tiga properti yang merupakan konstruktor untuk tiga objek yaitu Kolator, NumberFormat, dan DateTimeFormat.
Objek yang akan kita gunakan adalah DateTimeFormat yang akan membantu kami memformat waktu tanggal sesuai bahasa yang berbeda.
Itu DateTimeFormat obyek
Itu DateTimeFormat konstruktor mengambil dua argumen opsional;
lokal- string atau array string yang mewakili tag bahasa, misalnya; “de” untuk bahasa jerman, “id-GB” untuk bahasa Inggris yang digunakan di Inggris. Jika tag bahasa tidak disebutkan, lokal default akan menjadi runtime.pilihan- sebuah objek yang propertinya digunakan untuk mengkustomisasi formatter. Ini memiliki sifat-sifat berikut:
| Milik | Deskripsi | Nilai yang mungkin |
| hari | Hari dalam sebulan | “2 digit”, “numerik” |
| era | Era tanggal jatuh tempo, Kel: BC | “sempit”, “pendek”, “panjang” |
| formatMatcher | Algoritma yang digunakan untuk pencocokan format | “dasar”, “paling cocok”[Default] |
| jam | Merupakan Jam dalam waktu | “2 digit”, “numerik” |
| jam12 | Menunjukkan format 12 jam (benar) atau format 24 jam (Salah) | benar, Salah |
| localeMatcher | Algoritma yang digunakan untuk pencocokan lokal | “menengadah”, “paling cocok”[Default] |
| menit | Menit dalam waktu | “2 digit”, “numerik” |
| bulan | Bulan dalam setahun | “2 digit”, “numerik”, “sempit”, “pendek”, “panjang” |
| kedua | Detik dalam waktu | “2 digit”, “numerik” |
| zona waktu | Zona waktu untuk diterapkan | “UTC”, default adalah zona waktu runtime |
| timeZoneName | Zona waktu tanggal | “pendek”, “panjang” |
| hari kerja | Hari dalam seminggu | “sempit”, “pendek”, “panjang” |
| tahun | Tahun tanggal | “2 digit”, “numerik” |
Contoh:
var formatter = new Intl.DateTimeFormat ('en-GB'); / * mengembalikan formatter yang dapat memformat tanggal dalam format tanggal Inggris Inggris * / var options = weekday: 'short'; var formatter = new Intl.DateTimeFormat ('en-GB', options); / * mengembalikan formatter yang dapat memformat tanggal dalam format tanggal Inggris Inggris * bersama dengan hari kerja dalam notasi singkat seperti 'Kamis' untuk Kamis * / Itu format fungsi
Contoh dari DateTimeFormat objek memiliki accessor properti (pengambil) yang disebut format yang mengembalikan fungsi yang memformat a Tanggal berdasarkan pada lokal dan pilihan ditemukan di DateTimeFormat contoh.
Fungsi ini mengambil a Tanggal objek atau tidak terdefinisi sebagai argumen opsional dan mengembalikan a tali dalam format tanggal yang diminta.
catatan: Jika argumennya baik tidak terdefinisi atau tidak disediakan maka mengembalikan nilai Date.now () dalam format tanggal yang diminta.
Berikut sintaksinya:
format Intl.DateTimeFormat (). () // baru akan mengembalikan tanggal saat ini dalam format tanggal runtime
Dan sekarang mari kita kodekan format tanggal yang sederhana.
Mari kita ubah bahasa dan lihat hasilnya.
Sekarang, saatnya untuk melihat opsi.
Itu toLocaleDateString metode
Alih-alih menggunakan formatter seperti yang ditunjukkan pada contoh di atas, Anda juga dapat menggunakan Date.prototype.toLocaleString dengan cara yang sama dengan lokal dan pilihan argumen, mereka serupa tetapi disarankan untuk menggunakan DateTimeFormat keberatan ketika berhadapan dengan terlalu banyak tanggal dalam aplikasi Anda.
var mydate = Tanggal baru ('2015/04/22'); var options = weekday: "short", tahun: "numeric", bulan: "long", hari: "numeric"; console.log (mydate.toLocaleDateString ('en-GB', options)); // mengembalikan "Rab, 22 April 2015" Uji apakah lokal didukung
Untuk memeriksa yang didukung lokal, kita bisa menggunakan metode ini didukungLocalesDari dari DateTimeFormat obyek. Ini mengembalikan array dari semua lokal yang mendukung atau array kosong jika tidak ada lokal yang didukung.
Untuk pengujian, mari kita tambahkan lokal boneka “bla” dalam daftar lokasi yang akan diperiksa.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // mengembalikan Array ["zh", "fa-pes"]
Dukungan Browser
Pada akhir April 2015, browser utama mendukung API Internasionalisasi.
Referensi
- ECMA Internasional: Spesifikasi API Internasionalisasi Script ECMAS
- IANA: Registry Subtag Bahasa
- Norbert's Corner: API Internasionalisasi Script ECMAS
