Bagaimana Anda menampilkan tanggal dalam kode html?

Question

Dalam tutorial ini kami akan menunjukkan kepada Anda solusi menampilkan tanggal dan waktu saat ini dalam HTML menggunakan JavaScript, karena tanggal dan waktu merupakan aspek integral dari kehidupan kita sehari-hari, mereka memainkan peran penting dalam pemrograman komputer.

Table of Contents Show

Panduan Langkah Demi Langkah Menampilkan Tanggal Dan Waktu Saat Ini Di HTML Menggunakan Javascript. -
Membuat Objek Tanggal
Untuk menampilkan tanggal saat ini di JavaScript, gunakan metode Get
Menggunakan JavaScript, tampilkan jam, menit, dan detik
Menampilkan tanggal dan waktu saat ini dalam format lengkapnya
Kesimpulan. -
Bagaimana cara menampilkan waktu dan tanggal dalam HTML?
Bagaimana cara menampilkan tanggal saat ini di kotak teks HTML?
Bagaimana cara mengatur format tanggal dalam input HTML?

Anda mungkin perlu membuat situs web dengan kalender, jadwal kereta api, atau antarmuka untuk menjadwalkan janji temu di JavaScript

Aplikasi ini harus menampilkan waktu yang relevan berdasarkan zona waktu pengguna saat ini, atau menghitung kedatangan dan keberangkatan, serta waktu mulai dan berakhir

Anda juga mungkin perlu menggunakan JavaScript untuk membuat laporan pada waktu tertentu setiap hari, atau untuk memfilter melalui restoran dan tempat usaha yang sedang beroperasi

Objek Tanggal bawaan dan metode terkait dalam JavaScript membantu Anda mencapai semua tujuan ini dan banyak lagi. Format dan penggunaan tanggal dan waktu dalam JavaScript akan dibahas dalam tutorial ini

Panduan Langkah Demi Langkah Menampilkan Tanggal Dan Waktu Saat Ini Di HTML Menggunakan Javascript. -

Membuat Objek Tanggal

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var today = new Date();
</script>
</body>
</html>

Saat bekerja dengan tanggal, objek Tanggal JavaScript berguna. Masukkan variabel Tanggal ke skrip Anda untuk membuat objek baru dengan tanggal dan waktu saat ini

Untuk menampilkan tanggal saat ini di JavaScript, gunakan metode Get

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var time = new Date();
var date = time.getFullYear()+'-'+(time.getMonth()+1)+'-'+time.getDate();
</script>
</body>
</html>

_

Untuk mendapatkan tanggal dalam format YYYY-MM-DD, perbarui tes tanggal. html dan tambahkan variabel
Petunjuk pada baris kedua adalah sebagai berikut. tanggal. getFullYear() – Memanfaatkan variabel hari ini untuk menampilkan tahun 4 digit
tanggal. getMonth()+1 – Memberikan output sebagai bulan numerik – +1 mengonversi bulan dari digital (0-11) menjadi normal
tanggal. getDate() – Memberikan output sebagai hari numerik dalam sebulan
Ubah urutan perintah jika Anda menginginkan pengaturan yang berbeda

Menggunakan JavaScript, tampilkan jam, menit, dan detik

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var time = new Date();
var today= time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
</script>
</body>
</html>

Edit skrip Anda agar terlihat seperti ini untuk menunjukkan waktu di HH. MM. format SS
waktu. getHours() – Ini menggunakan variabel hari ini untuk menampilkan jam saat ini. Ini menggunakan jam 24 jam
waktu. getMinutes() – Menampilkan pembacaan menit saat ini
waktu. getSeconds() – Menampilkan pembacaan detik saat ini

Menampilkan tanggal dan waktu saat ini dalam format lengkapnya

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var time = new Date();
var date = time.getFullYear()+'-'+(time.getMonth()+1)+'-'+time.getDate();
var today= time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
var dateTime = date+' '+time;
</script>
</body>
</html>

Untuk menampilkan seluruh tanggal dan waktu dalam YYYY-MM-DD dan HH. MM. Format SS, gabungkan kedua instruksi. Buat perubahan berikut pada skrip Anda
Baris terakhir menggabungkan dua bit kode menjadi satu. Ini memberi tahu sistem untuk menampilkan seluruh tanggal di samping waktu lengkap

Kesimpulan. -

Anda sekarang dapat mengambil tanggal dan waktu saat ini menggunakan JavaScript sederhana. Dengan mengikat skrip ini ke suatu tindakan dan menuliskannya ke file log, ini dapat digunakan untuk membuat stempel waktu

Mengetahui cara bekerja dengan tanggal penting untuk banyak pekerjaan JavaScript dasar, karena ini memungkinkan Anda melakukan semuanya mulai dari menyiapkan laporan berulang hingga menampilkan tanggal dan jadwal di zona waktu yang tepat.

Pada artikel ini, kami telah menyajikan kode HTML dan JavaScript untuk Menampilkan Waktu dan Tanggal Langsung di Halaman HTML. Objek tanggal Javascript dan elemen rentang HTML dapat digunakan untuk menampilkan tanggal dan waktu saat ini. Secara default Javascript menggunakan zona waktu browser untuk menampilkan waktu dan tanggal

Waktu Langsung adalah. Catatan. Waktu di atas terus berubah

Daftar Isi

Objek Tanggal JavaScript + HTML, kode JS
Perbarui Tanggal Dan Waktu Secara Real Time
Metode untuk mendapatkan tanggal dan waktu
Ringkasan

Mari kita mulai dengan Menampilkan Waktu dan Tanggal Langsung di Halaman HTML

Objek Tanggal JavaScript + HTML, kode JS

Konstruktor Date() baru digunakan untuk membuat objek tanggal. Tanggal dan Waktu Saat Ini disimpan di dalam variabel javascript

Kemudian menggunakan properti TextContent konten elemen rentang HTML diatur dengan arus dan waktu. ID unik diberikan ke span tag sehingga kita dapat menggunakannya pada metode getElementById() untuk menampilkan tanggal dan waktu saat ini

KODE HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Document</title>
<h1> Time is <span id="time"> </span></h1>
<script src="index.js">   </script>
</head>
<body>
</body>
</html>

_

Kode JavaScript

 `use strict`
var datetime = new Date();
console.log(datetime);
document.getElementById("time").textContent = datetime; //it will print on html page

Demo
Tanggal dan Waktu adalah Kamis 30 Sep 2021 10. 43. 14 GMT+0530 (Waktu Standar India)

Perbarui Tanggal Dan Waktu Secara Real Time

Berikut adalah kode untuk memperbarui tanggal dan waktu secara real time dalam interval tertentu

_____ 6 _____ Metode untuk mendapatkan tanggal dan waktu

Tanggal. prototipe. getDate()

Ini mengembalikan hari dalam sebulan antara 1 - 31 menurut zona waktu setempat

Menggunakan getdate()

 `use strict`
var datetime = new Date().getDate();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page

Tanggal. prototipe. getday()
Ini mengembalikan hari dalam seminggu (0–6) untuk tanggal tertentu menurut zona waktu setempat

Menggunakan getday()

`use strict`
var datetime = new Date().getDay();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page

_

Tanggal. prototipe. getFullYear()
Ini mengembalikan tahun dari tanggal yang ditentukan sesuai dengan zona waktu setempat

Menggunakan getFullYear()

 `use strict`
var datetime = new Date().getFullYear();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page

_

Tanggal. prototipe. getHours()
Ini akan mengembalikan jam (0-23) di zona waktu lokal tertentu

Menggunakan getHours()


`use strict`
var datetime = new Date().getHours()+1;
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; // represent on webbrowser

Tanggal. prototipe. getMilliseconds()
Ini akan mengembalikan milidetik antara 0-999 pada tanggal yang ditentukan menurut zona waktu setempat

Menggunakan getMilliseconds()

 `use strict`
var datetime = new Date().getMilliseconds();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; // represent on html page

Tanggal. prototipe. getMonth()
Ini akan mengembalikan bulan antara 0-11 pada tanggal yang ditentukan menurut zona waktu setempat. untuk mendapatkan bulan antara 1 - 12, Anda harus menambahkan 1

Menggunakan getmonth()


`use strict`
var datetime = new Date().getMonth() + 1;
console.log(datetime); // it will represent date in the console of  developers tool
document.getElementById("time").textContent = datetime; // represent on html page

Tanggal. prototipe. toDateString()
Ini akan mengembalikan bagian "tanggal" dari Tanggal sebagai string yang dapat dibaca manusia seperti Jum 01 Okt 2021

Menggunakan toDateString()

`use strict`
var datetime = new Date().toDateString();
console.log(datetime); // it will represent date in the console of developer tool
document.getElementById("time").textContent = datetime; // represent on html page

Tanggal. prototipe. toLocaleTimeString()
Ini akan mengembalikan sebuah string dengan representasi peka-lokal dari bagian waktu dari tanggal ini, berdasarkan pengaturan sistem. Ini akan mengembalikan string seperti
12. 42. 15 pagi

 `use strict`
var datetime = new Date();
console.log(datetime);
document.getElementById("time").textContent = datetime; //it will print on html page

0Ringkasan

Tanggal dan waktu yang dibuat dalam JavaScript direpresentasikan dengan objek Tanggal
Kami tidak dapat membuat "hanya tanggal" atau "hanya waktu"
Bulan dihitung dari nol. Jadi Januaruy adalah bulan nol untuk mendapatkan bulan yang tepat tambah satu
Hari dalam seminggu di getDay() juga dihitung dari nol. Jadi hari Minggu adalah hari nol untuk hari yang tepat tambahkan satu
Tanggal dapat dikurangi, memberikan selisihnya dalam milidetik. Itu karena Tanggal menjadi stempel waktu saat dikonversi menjadi angka
Gunakan Tanggal. now() untuk mendapatkan stempel waktu saat ini dengan cepat

Dengan artikel ini di OpenGenus, Anda harus memiliki gagasan lengkap tentang Menampilkan Waktu dan Tanggal Langsung di Halaman HTML