input date html tutorial dan cara pakainya

Oleh: adminpartheon - 26-03-2022   -   14:01

Bagikan :

input date html passing and display value javascript

Dalam proses pembuatan website para programmer pasti akan menghadapi proses pembuatan inputan yang berjenis tanggal, baik itu untuk membuat seperti formulir pengisian data member ataupun pengisian sebuah form transaksi yang membutuhkan tanggal.

Cara lama yang saya pakai sebelum mengenal html type adalah menggunakan input text biasa dan dimodifikasi dengan jquery sehingga inputan text tadi mempunyai aturan pengisian sesuai dengan format yang ditentukan (dalam kasus saya dd/mm/yyyy). Okey, cara yang saya lakukan diatas mungkin akan saya bahas diartikel berikutnya sebagai sebuah alternative. Namun, cara diatas sungguh merepotkan dan memakan banyak waktu. Sebagai gantinya saya menggunakan object html 5 yaitu input type date. 

Sejak menggunakan input type date banyak proses yang harus dilalui dengan cara lama dapat dipersingkat. Tentu saja ini membuat saya merasa "Kok ga dari dulu ya pakai cara ini hehehe, tapi gpp hidup harus terus belajar... (sambil menangis)". Beberapa keuntungan dari penggunaan input type date dibanding menggunakan input type text dengan bantuan jquery adalah:

  • Dengan menggunakan html input date kita tidak memerlukan proses rubah format tanggal kedalam format tanggal yang diterima oleh database di server ( di browser dd/mm/yyyy sedangkan database kita berformat yyyy-mm-dd).
  • Tidak perlu mengetik coding banyak.
  • Tampilan yang bagus dengan pop up kalender

Untuk proses pembuatannya dapat anda lihat dari contoh dibawah ini:

1. Buka file view php anda, misal dicontoh belajar.php (dalam kasus ini saya memakai php, bisa juga file html)

<html lang="en">
<head>
	<title></title>
</head>
<body>
	<input type="date" value="2012-02-01" />
</body>

</html>

dan hasilnya akan menjadi seperti ini:

contoh input date

disini <input type='date' value='2012-02-01' /> berarti bahwa inputan tanggal diset awal menjadi tanggal 01/02/2012. Untuk value harus diset dengan format YYYY-mm-dd, yang artinya (Tahun)-(bulan)-(tgl) : '2012-02-01'. Sedangkan display dari input date dikondisikan sesuai dengan format tgl yang disetting dioperasi sistem.

2. Set value (nilai kalendar date) dengan javascript

Apabila kita ingin memberi nilai pada input date via javascript maka berikut adalah contoh codenya:

<html lang="en">
<head>
	<title></title>
</head>
<body>
	<input id="inputdate" type="date" value="" />
</body>
<script type="text/javascript">
	var d=new Date("2022-03-18");				
	var currentYear = d.getFullYear();
	var today = d.getDate();
	if(today<10)
	{
		today="0"+today;
	}
	var currentMonth = d.getMonth() + 1;
	if(currentMonth<10)
	{
		currentMonth="0"+currentMonth;
	}
	strfulldate=currentYear+"-"+currentMonth+"-"+today;	
	document.getElementById("inputdate").value=strfulldate;
</script>
</html>

Dimana kita harus membuat sebuah string dari javascript dengan format YYYY-mm-dd. Digit dari string tanggal tersebut harus sama persis jumlahnya, yaitu tahun 4 digit, bulan 2 digit, dan tanggal 2 digit (2022-03-18). 

Okey gimana!, cukup mudah kan teman-teman semoga dengan share ilmu ini bisa memperlancar proyek web teman-teman yang ada inputan tanggalnya.

Bagi anda pemilik usaha yang ingin menerapkan sistem komputer untuk kontrol stok, rekap laporan otomatis, laba-rugi otomatis, sistem kasir,dan barcode qrcode. Dapat mencoba aplikasi partheon stok.. GRATIS 100%. Installnya mudah cukup KLIK/TAP link gambar dibawah ini:

playstore_install 

Artikel terkait

belajar elektro dasar rangkaian listrik seri dan pararel
belajar elektro dasar rangkaian listrik seri dan pararel
Cara mematikan update windows 10
Cara mematikan update windows 10
Tips mengamankan akun Instagram anda.
Tips mengamankan akun Instagram anda.
input date html tutorial dan cara pakainya
input date html tutorial dan cara pakainya
Belajar membuat website setting install xampp webserver
Belajar membuat website setting install xampp webserver
cegah copy paste konten web dengan javascript dan css anti plagiarism
cegah copy paste konten web dengan javascript dan css anti plagiarism
Artikel lainnya
cek kabel putus dengan multimeter atau avometer digital visero a830L
Seringkali peralatan elektronik kita tidak berfungsi karena adanya ganggunan dalam komponennya, salah satunya adalah kabel putus. Artikel kali ini akan membahas cara cek kabel putus dengan multimeter digital.
cara membuat function mysql database
selain query kita dapat membuat sebuah fungsi untuk mempermudah operasi database, bagaimana caranya ? yuks kita baca artikel berikut ini.
fungsi resistor beserta cara ukur lewat kode warna resistor dan multimeter
Kali ini kita akan bahas pengertian komponen elektro yaitu resistor beserta cara ukurnya berdasarkan kode warna dan multimeter digital
5 youtuber cerita menarik tuk menemani harimu
Sambil kerja dikomputer mendengarkan cerita-cerita menarik dapat kamu coba untuk mengusir kebosanan dan meningkatkan produktifitasmu, yuk coba dengarkan 5 youtuber Indonesia yang pandai bercerita ini.
Khasiat tanaman pecut kuda
Jarang orang mengetahui tanaman pecut kuda, padahal khasiat dan kegunaannya sangat banyak. berikut adalah kegunaan pecut kuda
belajar javascript membuat fungsi untuk merubah angka menjadi kalimat terbilang
Sesi belajar javascript kali ini akan membahas pembuatan fungsi untuk merubah sebuah angka menjadi kalimat terbilang.
4 youtuber bule yang cerita tentang indonesia mulai dari wisata, budaya sampai makanan
pesona indonesia mampu memikat hati orang asing, 4 youtuber ini membuat vlog tentang beberapa wisata didaerah Indonesia. Siapakah 4 youtuber tersebut, yuks kita simak youtuber yang sering ditonton admin..
4 film barat dengan jagoan yang tak terkalahkan
Anda senang dengan film barat? suka dengan aksi perkelahian yang memacu adrenalin? berakhir happy ending? yuk simak artikel berikut ini buat menambah list film yang akan kamu tonton
5 lagu barat klasik romantis
Kangen sama pasangan? cobain lagu-lagu klasik ini supaya makin kangen dengan pasanganmu. Lagu klasik barat yang memorable dan romantis habis
input date html tutorial dan cara pakainya
Dalam membuat website pasti ada saatnya kita menggunakan isian tanggal, dalam artikel berikut kita akan mengupas cara dan petunjuk pengunaan input date untuk mempermudah operasi tanggal.
Tutorial php cara membuat thousand separator nominal uang
Artikel berikut akan membahas cara merubah nominal uang menjadi lebih enak dibaca dengan menambah separator ribuan, ratusan ribu, dll didalam pemprograman PHP.
5 youtuber review film untuk menambah list film yang akan kamu tonton
ga ada waktu buat nonton film atau bingung film yang bagus yang mana, yuk cek 5 youtuber spesialist membahas film-film yang menarik lewat artikel ini.
Raline Shah profil
Raline shah dikenal sebagai artis Indonesia yang pergaulannya luas, dari mohammad hadid sampai artis asia internasional lainnya masuk lingkaran pertemanannya. Berikut adalah biodata raline shah artis yang bukan kaleng-kaleng
Tutorial javascript cara merubah format tgl
kali ini, admin akan membahas cara merubah format tgl dari format YYYY-mm-dd (2021-05-28) menjadi format dd/mm/YYYY (28/05/2021) dengan bahasa pemrograman javascript.
wisata situbondo, utama raya beach dan resto
kalau kamu berdomisili di jawa dan sedang pergi ke bali lewat darat pastilah tahu ada pom bensin dan rest area yang bagus dan keren yang bernama utama raya.