JS Menampilkan Tanggal Format Indonesia

Berikut ini merupakan kode untuk tanggalnya.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menampilkan Tanggal Besok dengan Format Tertentu</title>
</head>
<body>
<h1>Tanggal Besok:</h1>
<p id="tanggal-besok"></p>

<script>
var hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
var bulan = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);

var namaHariBesok = hari[tomorrow.getDay()];
var tanggalBesok = tomorrow.getDate();
var namaBulanBesok = bulan[tomorrow.getMonth()];
var tahunBesok = tomorrow.getFullYear();

var tanggalBesokFormat = namaHariBesok + ', ' + tanggalBesok + ' ' + namaBulanBesok + ' ' + tahunBesok;

document.getElementById("tanggal-besok").innerHTML = tanggalBesokFormat;
</script>
</body>
</html>

Pada Contoh Kode di atas merupakan kode untuk menampilkan kode di hari selanjutnya, jika kalian ingin menampilkan tanggal untuk hari ini maka kalian bisa perhatikan pada bagian kode ini:

tomorrow.setDate(tomorrow.getDate() + 1);

Kalian hanya perlu menghapus pada + 1 maka akan menampilkan tanggal pada hari ini, contohnya sebagai berikut.

tomorrow.setDate(tomorrow.getDate());

Menambahkan fungsi Tombol Untuk Menampilkan

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menampilkan Tanggal Besok dengan Format Tertentu</title>
</head>
<body>
<h1>Tanggal Besok:</h1>
<button onclick="tampilkanTanggal()">Hasil</button>
<p id="tanggal-besok" style="display:none;"></p>

<script>
var hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
var bulan = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

function tampilkanTanggal() {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);

var namaHariBesok = hari[tomorrow.getDay()];
var tanggalBesok = tomorrow.getDate();
var namaBulanBesok = bulan[tomorrow.getMonth()];
var tahunBesok = tomorrow.getFullYear();

var tanggalBesokFormat = namaHariBesok + ', ' + tanggalBesok + ' ' + namaBulanBesok + ' ' + tahunBesok;

var elTanggalBesok = document.getElementById("tanggal-besok");
elTanggalBesok.innerHTML = tanggalBesokFormat;
elTanggalBesok.style.display = "block";
}
</script>
</body>
</html>

Berikut adalah contoh kode HTML dan JavaScript yang menambahkan ID "sekarang" dan mengganti ID "sekarang" dengan ID "tanggal-besok" ketika tombol "hasil" ditekan:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menampilkan Tanggal Besok dengan Format Tertentu</title>
</head>
<body>
<h1>Tanggal:</h1>
<p id="sekarang">Sekarang: <script>document.write(new Date().toLocaleString());</script></p>
<p id="tanggal-besok" style="display:none;"></p>
<button onclick="tampilkanTanggal()">Hasil</button>

<script>
var hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
var bulan = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

function tampilkanTanggal() {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);

var namaHariBesok = hari[tomorrow.getDay()];
var tanggalBesok = tomorrow.getDate();
var namaBulanBesok = bulan[tomorrow.getMonth()];
var tahunBesok = tomorrow.getFullYear();

var tanggalBesokFormat = namaHariBesok + ', ' + tanggalBesok + ' ' + namaBulanBesok + ' ' + tahunBesok;

var elSekarang = document.getElementById("sekarang");
var elTanggalBesok = document.getElementById("tanggal-besok");

elSekarang.style.display = "none";
elTanggalBesok.innerHTML = tanggalBesokFormat;
elTanggalBesok.style.display = "block";
}
</script>
</body>
</html>

Kode di atas mengubah HTML dengan menambahkan ID "sekarang" pada elemen yang menampilkan tanggal sekarang. Kemudian pada fungsi tampilkanTanggal(), kita mengambil elemen dengan ID "sekarang" dan mengubah nilai properti display pada CSS menjadi "none" agar elemen tersebut disembunyikan. Kemudian, kita mengambil elemen dengan ID "tanggal-besok" dan mengubah nilai properti display menjadi "block" agar elemen tersebut ditampilkan. Dengan cara ini, ketika tombol "hasil" ditekan, ID "sekarang" akan dihilangkan dan diganti dengan ID "tanggal-besok".

Berikut adalah contoh kode HTML dan JavaScript yang dapat menampilkan bergantian ID "sekarang" dan "tanggal-besok" ketika tombol "hasil" ditekan:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menampilkan Tanggal Besok dengan Format Tertentu</title>
</head>
<body>
<h1>Tanggal:</h1>
<p id="sekarang">Sekarang: <script>document.write(new Date().toLocaleString());</script></p>
<p id="tanggal-besok" style="display:none;"></p>
<button onclick="tampilkanTanggal()">Hasil</button>

<script>
var hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
var bulan = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

function tampilkanTanggal() {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);

var namaHariBesok = hari[tomorrow.getDay()];
var tanggalBesok = tomorrow.getDate();
var namaBulanBesok = bulan[tomorrow.getMonth()];
var tahunBesok = tomorrow.getFullYear();

var tanggalBesokFormat = namaHariBesok + ', ' + tanggalBesok + ' ' + namaBulanBesok + ' ' + tahunBesok;

var elSekarang = document.getElementById("sekarang");
var elTanggalBesok = document.getElementById("tanggal-besok");

if (elSekarang.style.display === "block") {
elSekarang.style.display = "none";
elTanggalBesok.innerHTML = tanggalBesokFormat;
elTanggalBesok.style.display = "block";
} else {
elSekarang.style.display = "block";
elTanggalBesok.style.display = "none";
}
}
</script>
</body>
</html>

[Bug] Gedebug

Pencarian

Minggu, 30 Juni 2024

JS Menampilkan Tanggal Format Indonesia

Label