cara membuat input tanggal dengan tampilan kalender

membuat input tanggal dengan tampilan kalender dan mencetak nilai dengan javascript

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat input date atau input tanggal dengan tampilan kalender dan mencetak nilai tanggal yang di pilih oleh user.

jadi di sebuah html ada yang namanya input dengan type date, yang di mana html tersebut bisa menampilkan sebuah kalender yang dapat user pilih tanggal yang di inginkan.

mungkin di antara kalian juga sudah sering menjumpai kalender tersebut biasanya ada pada aplikasi pemesanan tiket pesawat boking hotel dll.

nah di kesempatan kali ini saya akan menunjukkan cara membuatnya dan cara mengcetak nilai tanggal yang di pilih oleh user.

di tutorial ini hanyalah dasarnya saja, selebihnya bisa kalian kreasikan sendiri sesuai kebutuhan, atau kalian juga bisa mengkombinasikannya dengan formulir order menuju whatsapp di blogger itu juga bisa bangat ya.

Membuat Input Tanggal Dengan Tampilan Kalender

pertama buat dulu html input dengan type date dan beri nama id sesuai keinginanmu, di sini saya memberikan nama id tanggal dan saya menggunakan onchange untuk menjalankan fungsi cetak nantinya

<input type='date' id='tanggal' name='tanggal' onchange='cetakTanggal()'/>

dan di sini saya buat sebuah div untuk menampung nilainya nanti saya beri id cetak dan di teksnya saya beri teks hari ini tujuannya agar ketika user tidak memilih tanggalnya maka nilai yang di ambil adalah hari ini

<div id='cetak'>Hari ini</div>

dan tambahkan javascript ini agar input value defaultnya tanggal hari ini, jika tidak tampilannya hanya hh/bb/tttt

document.querySelector('#tanggal').value = new Date().toISOString().substring(0, 10);

dan tambahkan javascript ini berfungsi untuk mengcetak tanggal yang di pilih oleh user ke dalam tag div dengan id cetak yang telah kita buat sebelumnya.

function cetakTanggal() {
var tanggal = document.querySelector('#tanggal').value;
document.querySelector('#cetak').innerHTML = tanggal.split('-')[2]+'-'+tanggal.split('-')[1]+'-'+tanggal.split('-')[0];
}

sehingga kode keseluruhan akan tampak seperti ini.

<input type='date' id='tanggal' name='tanggal' onchange='cetakTanggal()'/>

<!-- hasil akan tercetak di dalam div ini -->
<div id='cetak'>Hari ini</div>

<script>
// set default tanggal saat ini
document.querySelector('#tanggal').value = new Date().toISOString().substring(0, 10);

// fungsi onchange cetak nilai
function cetakTanggal() {
var tanggal = document.querySelector('#tanggal').value;
document.querySelector('#cetak').innerHTML = tanggal.split('-')[2]+'-'+tanggal.split('-')[1]+'-'+tanggal.split('-')[0];
}
</script>

ok jadi sekian cara membuat input tanggal dengan tampilan kalender yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.