Cara menggunakan javascript menampilkan tanggal

Daftar Isi

Menampilkan Tanggal dengan Javascript – Hi bret kali ini saya mau share artikel tentang cara menampilkan tanggal dengan Javascript, Dalam JavaScript pada dasarnya telah menyediakan Date Object. Date Object ada berbagai metode.

Date JavaScript menentukan dari zona EcmaScript epoch yang mewakili milidetik sejak 1 Januari 1970 UTC. date dan time ini sama dengan zaman UNIX (nilai dasar utama untuk nilai date dan time yang direkam komputer).

Membuat Objek Tanggal Javascript

Ada 4 cara untuk membuat date object.

1. new Date()
2. new Date(milliseconds)
3. new Date(Date string)
4. new Date(year, month, day, hours, minutes, seconds, milliseconds)

1. new Date()

Kamu dapat membuat date object menggunakan konstruktor new Date(). Sebagai contoh :

const waktuSekarang = new Date();
console.log(waktuSekarang); // menampilkan date dan time saat ini

Output :

Sat Dec 03 2022 10:31:56 GMT+0700 (Western Indonesia Time)

Disini new Date() membuat objek tanggal baru dengan tanggal saat ini dan waktu setempat.

2. new Date(milliseconds)

Objek Tanggal berisi angka yang mewakili milidetik sejak 1 Januari 1970 UTC.

new Date(miliseconds), Membuat objek tanggal baru dengan menambahkan milidetik ke waktu nol. Sebagai contoh :

const time1 = new Date(0);

// waktu zaman
console.log(time1); // Thu Jan 01 1970 05:30:00

// 100000000000 milidetik setelah waktu zaman
const time2 = new Date(100000000000)
console.log(time2); // Sat Mar 03 1973 16:46:40

Note : 1000 milidetik sama dengan 1 detik.

3. new Date(date string)

new Date(date string), Membuat objek tanggal baru dari string tanggal.

Dalam JavaScript, umumnya ada tiga format input tanggal.

ISO Date Formats

Kamu dapat membuat objek tanggal dengan meneruskan format tanggal ISO. Sebagai contoh :

// ISO Date(International Standard)
const date = new Date("2022-07-01");

// Hasil tanggal akan sesuai dengan UTC
console.log(date); // Wed Jul 01 2022 05:45:00 GMT+0545

Kamu juga dapat menampilkan hanya tahun dan bulan atau hanya tahun saja. Sebagai contoh :

const date = new Date("2022-07");
console.log(date); // Wed Jul 01 2022 05:45:00 GMT+0545

const date1 = new Date("2022");
console.log(date1); // Wed Jul 01 2022 05:45:00 GMT+0545

Kamu juga dapat menampilkan waktu tertentu ke tanggal ISO.

const date = new Date("2022-07-01T12:00:00Z");
console.log(date); // Wed Jul 01 2022 17:45:00 GMT+0545

Note : Tanggal dan waktu di pisahkan dengan huruf kapital T. Dan waktu UTC ditentukan dengan huruf kapital Z.

4. new Date(year, month, day, hours, minutes, seconds, milliseconds)

new Date(year, month, day, hours, minutes, seconds, milliseconds), Membuat objek tanggal baru dengan melewati tanggal dan waktu tertentu. Sebagai contoh :

const time1 = new Date(2022, 1, 20, 4, 12, 11, 0);
console.log(time1); // Thu Feb 20 2022 04:12:11

Argumen yang diteruskan memiliki urutan tertentu. Jika 4 angka di lewati, itu mewakili tahun, bulan, hari dan jam. Sebagai contoh :

Pada kesempatan kali ini saya akan menampilkan tanggal dan waktu pada suatu halaman website menggunakan JavaScript atau PHP. Tanggal dan waktu berguna bagi pengunjung website mengetahui kapan suatu konten di website Anda diterbitkan. Hal ini dapat dilakukan dengan beberapa cara. Berikut kodenya.

1. Menampilkan Tanggal Dan Waktu Menggunakan JavaScript (Client-side)

Jika menggunakan metode ini, maka tampil tanggal dan waktu sesuai jam sistem pengunjung website. Yang pertama kali harus Anda siapkan adalah di mana tanggal dan waktu ingin ditampilkan pada halaman website. Hal ini bisa dilakukan dengan menambahkan id pada elemen

atau .

CATATAN: Hari yang digunakan sebagai contoh adalah : 19 Februari 2020

Contoh Menggunakan elemen

Tanggal/Waktu: 

Contoh Menggunakan elemen

Tanggal/Waktu:

Nah, berikutnya adalah menentukan/memasangkan date/time ke konten Anda (HTML) yang memiliki id=”tanggalwaktu”

Tanggal/Waktu: 

Hasil : Tanggal/Waktu: 2/19/2020, 2:50:48 PM

Jika Anda hanya ingin menampilkan tanggal saat ini saja:

Tanggal/Waktu: 

Hasil : Tanggal/Waktu: 2/19/2020

Jika Anda hanya ingin menampilkan waktu saat ini saja:

Tanggal/Waktu: 

Hasil : Tanggal/Waktu: 2:51:51 PM

Dengan menggunakan fungsi “toLocaleString” pada kode, maka output yang tampil akan tergantung waktu lokal pengguna. Kode ini mungkin sudah tampil dengan baik, namun bagaimana jika Anda ingin menampilkannya dengan format tertentu? Misal format DD.MM.YYY hh:mm bisa Anda ganti dengan MM.DD.YYY hh:mm. Solusinya ada sebagai berikut:

Contoh MM/DD/YYYY hh:mm

Tanggal/Waktu: 

Hasil : Tanggal/Waktu: 02/19/2020 41:71

Contoh DD.MM.YYYY hh:mm

Tanggal/Waktu: 

Hasil : Tanggal/Waktu: 19.02.2020 14:46

Pada kode di atas, kita tambahkan angka 0 di depan angka single digit (misal 1, 2, 3, dst) supaya lebih bagus dilihat.