Cara mengubah tanggal di javascript

Dalam tutorial ini, kita akan belajar mengonversi objek tanggal JavaScript menjadi string. Dalam JavaScript, kita dapat memanggil beberapa metode hanya pada string. Jadi, kita perlu mengonversi tanggal menjadi string untuk menggunakan tanggal dengan metode tersebut

Di sini, kami memiliki tiga pendekatan berbeda untuk mengonversi objek tanggal menjadi string

Menggunakan Metode toString()

Dalam pendekatan ini, kita akan menggunakan metode toString() JavaScript untuk mengonversi objek tanggal menjadi string. Metode toString() berguna untuk mengonversi variabel tipe data apa pun seperti angka, objek, atau larik menjadi string

Sintaksis

Pengguna dapat mengikuti sintaks di bawah ini untuk menggunakan metode toString()

let date = new Date();
let datestr = date.toString();

Contoh

Pada contoh di bawah ini, kita telah membuat objek tanggal menggunakan konstruktor dari kelas Date(). Kami telah menggunakan metode toString() untuk mengonversi objek tanggal menjadi string. Juga, kami telah memeriksa jenis string yang dikonversi untuk mengklarifikasi objek yang dikonversi menjadi string

   
Converting date object to string in JavaScript.
   
Convert date to string using toString() method.
   
   

Menggunakan metode toISOString()

Metode toISOString() digunakan untuk mengubah objek tanggal menjadi format string ISO. Ini adalah metode bawaan dari kelas Tanggal JavaScript

Sintaksis

Pengguna dapat mengikuti sintaks di bawah ini untuk menggunakan metode toISOString()

let date = new Date();
let datestr = date.toISOString();

Contoh

Pada contoh di bawah ini, kami telah mengonversi objek tanggal menjadi string menggunakan metode toISOString(). Pengguna dapat melihat di keluaran bahwa format tanggal juga diubah karena kami telah mengonversi objek tanggal menjadi string ISO

   
Converting date object to string in JavaScript.
   
Convert date to string using date.toISOString() method.
   
   

Menggunakan Momen. js format() Metode

Momen. Pustaka js menyertakan metode format() untuk memformat objek tanggal ke dalam format string. Dalam parameter metode format(), pengguna dapat meneruskan format yang diperlukan untuk string tanggal

Sintaksis

Pengguna dapat mengikuti sintaks di bawah ini untuk menggunakan. format() metode Momen. js

date = moment().format('YY – MM - DD HH : mm : ss');

Parameter

Semua parameter saat ini. metode format() adalah opsional

• YY - Ini mewakili tahun

• MM - Ini mewakili Bulan

• DD − Parameter ini untuk hari itu

• HH − Ini untuk jam

• mm − Ini untuk menit

• ss - Ini mewakili detik

Contoh

Dalam contoh di bawah ini, kami telah menggunakan Moment. js perpustakaan JavaScript. Kami telah membuat dua objek tanggal;

   


   
Converting date object to string in JavaScript.
   
Convert date to string using moment().format() method.
   
   

Pengguna telah mempelajari tiga pendekatan untuk mengonversi objek tanggal menjadi string. Pendekatan modern adalah yang terakhir, menggunakan metode format() dari Moment. js. Ini memungkinkan pengguna untuk mengatur pembatas dalam string tanggal. Namun, pengguna juga dapat menggunakan metode toDateString() untuk menyelesaikan masalah

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 mengonversi format tanggal dalam JavaScript?

Bagaimana cara mengonversi Tanggal string menjadi yyyy

Bagaimana cara mengonversi Tanggal ke hari dalam JavaScript?

Cara mengubah format tanggal dari yyyy