Cara mengubah format waktu di javascript

JavaScript adalah salah satu dari tiga teknologi web mendasar yang akan Anda gunakan saat mengembangkan situs web atau aplikasi web

Saat membuat halaman web ini, pada titik tertentu, Anda mungkin perlu menggunakan tanggal karena alasan tertentu – seperti menampilkan saat sesuatu diunggah, disimpan, dan sebagainya

Pada artikel ini, Anda akan mempelajari cara memformat tanggal dalam JavaScript dan melihat bagaimana Anda dapat melakukan ini dengan pustaka tanggal JavaScript populer yang dikenal sebagai momen. js

Cara Mendapatkan Tanggal di JavaScript

Dalam JavaScript, Anda menggunakan konstruktor new Date()_ atau Date() untuk mendapatkan tanggal Anda (baik tanggal saat ini atau tanggal tertentu)

Konstruktor new Date() mengembalikan objek

let objectDate = new Date();


let day = objectDate.getDate();
console.log(day); // 23

let month = objectDate.getMonth();
console.log(month + 1); // 8

let year = objectDate.getFullYear();
console.log(year); // 2022

let stringDate = Date();
console.log(stringDate); // "Tue Aug 23 2022 14:47:12 GMT-0700 (Pacific Daylight Time)"

let objectDate = new Date();
console.log(objectDate); // Tue Aug 23 2022 14:47:12 GMT-0700 (Pacific Daylight Time)

Tanggal format lengkap ini terdiri dari hari, bulan, tahun, menit, jam, dan informasi lain yang tidak selalu Anda perlukan

Perhatian utama Anda adalah untuk melihat bagaimana Anda dapat memformat nilai tanggal ini untuk mengembalikan tanggal dalam format yang dapat dibaca, yang dapat Anda sematkan di halaman web Anda agar semua orang dapat memahaminya.

Cara Memformat Tanggal di JavaScript

Memformat tanggal tergantung pada Anda dan kebutuhan Anda. Di beberapa negara, bulan datang sebelum hari, lalu tahun (22/06/2022). Di lain, hari datang sebelum bulan, lalu tahun (22/06/2022), dan banyak lagi

Terlepas dari formatnya, Anda ingin memecah nilai objek tanggal dan mendapatkan informasi yang diperlukan yang Anda inginkan untuk halaman web Anda

Ini dimungkinkan dengan metode tanggal JavaScript. Ada banyak dari metode ini, tetapi karena Anda hanya memperhatikan tanggal dalam artikel ini, Anda hanya memerlukan tiga di antaranya

• let objectDate = new Date();
  
  
  let day = objectDate.getDate();
  console.log(day); // 23
  
  let month = objectDate.getMonth();
  console.log(month + 1); // 8
  
  let year = objectDate.getFullYear();
  console.log(year); // 2022
  

  2 – Anda akan menggunakan metode ini untuk mendapatkan tahun sebagai angka empat digit (yyyy). Misalnya, 2022

• let objectDate = new Date();
  
  
  let day = objectDate.getDate();
  console.log(day); // 23
  
  let month = objectDate.getMonth();
  console.log(month + 1); // 8
  
  let year = objectDate.getFullYear();
  console.log(year); // 2022
  

  3 – Anda akan menggunakan metode ini untuk mendapatkan bulan sebagai angka antara 0-11, dengan setiap angka mewakili bulan dari Januari hingga Desember. Misalnya,

  let objectDate = new Date();
  
  
  let day = objectDate.getDate();
  console.log(day); // 23
  
  let month = objectDate.getMonth();
  console.log(month + 1); // 8
  
  let year = objectDate.getFullYear();
  console.log(year); // 2022
  

  4 akan menjadi indeks untuk bulan Maret karena ini adalah pengindeksan berbasis nol (artinya dimulai dari

  let objectDate = new Date();
  
  
  let day = objectDate.getDate();
  console.log(day); // 23
  
  let month = objectDate.getMonth();
  console.log(month + 1); // 8
  
  let year = objectDate.getFullYear();
  console.log(year); // 2022
  

  5)

• let objectDate = new Date();
  
  
  let day = objectDate.getDate();
  console.log(day); // 23
  
  let month = objectDate.getMonth();
  console.log(month + 1); // 8
  
  let year = objectDate.getFullYear();
  console.log(year); // 2022
  

  6 – Anda akan menggunakan metode ini untuk mendapatkan hari sebagai angka antara 1-31 (ini bukan indeks, tetapi nilai hari yang tepat, jadi dimulai dari 1 bukan 0)

Catatan. Metode ini hanya dapat diterapkan atau hanya akan bekerja dengan konstruktor new Date(), yang mengembalikan objek tanggal

let objectDate = new Date();


let day = objectDate.getDate();
console.log(day); // 23

let month = objectDate.getMonth();
console.log(month + 1); // 8

let year = objectDate.getFullYear();
console.log(year); // 2022

Anda akan melihat bahwa

let objectDate = new Date();


let day = objectDate.getDate();
console.log(day); // 23

let month = objectDate.getMonth();
console.log(month + 1); // 8

let year = objectDate.getFullYear();
console.log(year); // 2022

let objectDate = new Date();


let day = objectDate.getDate();
console.log(day); // 23

let month = objectDate.getMonth();
console.log(month + 1); // 8

let year = objectDate.getFullYear();
console.log(year); // 2022

let objectDate = new Date();


let day = objectDate.getDate();
console.log(day); // 23

let month = objectDate.getMonth();
console.log(month + 1); // 8

let year = objectDate.getFullYear();
console.log(year); // 2022

let objectDate = new Date();


let day = objectDate.getDate();
console.log(day); // 23

let month = objectDate.getMonth();
console.log(month + 1); // 8

let year = objectDate.getFullYear();
console.log(year); // 2022

let format1 = month + "/" + day + "/" + year;
console.log(format1); // 7/23/2022

let format2 = day + "/" + month + "/" + year;
console.log(format2); // 23/7/2022

let format3 = month + "-" + day + "-" + year;
console.log(format3); // 7-23-2022

let format4 = day + "-" + month + "-" + year;
console.log(format4); // 23-7-2022

let format1 = month + "/" + day + "/" + year;
console.log(format1); // 7/23/2022

let format2 = day + "/" + month + "/" + year;
console.log(format2); // 23/7/2022

let format3 = month + "-" + day + "-" + year;
console.log(format3); // 7-23-2022

let format4 = day + "-" + month + "-" + year;
console.log(format4); // 23-7-2022

Pada titik ini, Anda telah dapat mengekstraksi semua nilai tanggal dari objek tanggal. Anda sekarang dapat mengaturnya dalam format apa pun yang Anda inginkan

let format1 = month + "/" + day + "/" + year;
console.log(format1); // 7/23/2022

let format2 = day + "/" + month + "/" + year;
console.log(format2); // 23/7/2022

let format3 = month + "-" + day + "-" + year;
console.log(format3); // 7-23-2022

let format4 = day + "-" + month + "-" + year;
console.log(format4); // 23-7-2022

Di atas, Anda menggabungkan nilai menggunakan operator plus. Anda juga dapat menggunakan literal templat untuk menggabungkan

let format1 = `${month}/${day}/${year}`;
console.log(format1); // 7/23/2022

let format2 = `${day}/${month}/${year}`;
console.log(format2); // 23/7/2022

let format3 = `${month}-${day}-${year}`;
console.log(format3); // 7-23-2022

let format4 = `${day}-${month}-${year}`;
console.log(format4); // 23-7-2022

Sekarang, Anda telah melihat cara yang mungkin Anda inginkan untuk memformat tanggal Anda

Skenario lain dapat terjadi jika Anda ingin nilai bulan dan hari didahului dengan 0 jika itu adalah nilai numerik tunggal (dari 1-9). Untuk melakukan ini, Anda perlu menambahkan kondisi untuk menangani ini sebelum memformat tanggal Anda

if (day < 10) {
    day = '0' + day;
}

if (month < 10) {
    month = `0${month}`;
}

let format1 = `${month}/${day}/${year}`;
console.log(format1); // 07/23/2022

Tertarik dengan cara lain Anda dapat memformat tanggal dalam JavaScript?

Cara Memformat Tanggal di JavaScript dengan Moment. js

Momen. js adalah perpustakaan tanggal dan waktu JavaScript yang dapat Anda gunakan untuk memformat tanggal Anda dengan cepat tanpa menangani logika dengan begitu banyak baris kode

Untuk menggunakan pustaka ini, Anda harus menginstal paket di proyek Anda menggunakan salah satu opsi pilihan Anda di dokumentasi

Untuk panduan ini, Anda hanya memperhatikan bagaimana Anda dapat memformat tanggal dengan Momen. js

let date = moment().format();

console.log(date); // 2022-08-23T16:50:22-07:00

Untuk memformat nilai tanggal/waktu ini, yang harus Anda lakukan hanyalah memasukkan format pilihan Anda, dan itu akan mengembalikan tanggal yang diformat seperti yang terlihat di bawah ini

let dateFormat1 = moment().format('D-MM-YYYY');
console.log(dateFormat1); // 23-08-2022

let dateFormat2 = moment().format('D/MM/YYYY');
console.log(dateFormat2); // 23/08/2022

let dateFormat3 = moment().format('MM-D-YYYY');
console.log(dateFormat3); // 08-23-2022

let dateFormat4 = moment().format('MM/D/YYYY');
console.log(dateFormat4); // 08/23/2022

Kesimpulan

Artikel ini telah mengajari Anda cara memformat tanggal dalam JavaScript, baik dari awal atau dengan momen. perpustakaan js

Berhati-hatilah saat menggunakan perpustakaan untuk proyek kecil, karena perpustakaan meningkatkan ukuran proyek Anda. Ini karena pustaka ini dirancang untuk menangani lebih banyak operasi. Tetapi untuk menggunakan operasi minimal apa pun, Anda tetap harus menginstal seluruh pustaka

Anda selalu disarankan untuk melakukan operasi sederhana seperti ini dari awal. Yaitu, kecuali jika Anda terpaksa menggunakan perpustakaan, atau perpustakaan telah diinstal, atau Anda sedang mengerjakan proyek skala besar yang memerlukan pemformatan rumit

Bersenang-senang membuat kode

IKLAN

IKLAN

IKLAN

IKLAN

Joel Olawanle

Pengembang Frontend & Penulis Teknis

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Bagaimana cara mengubah format waktu menggunakan js?

Bagaimana cara mengubah format 24 jam menjadi 12 jam dalam JavaScript?

Bagaimana cara mengubah waktu menjadi format 24 jam dalam JavaScript?

Bagaimana cara mendapatkan waktu 12 jam dalam JavaScript?