Advertisement here

Cara Disable Tanggal di HTML dan Javascript

Apa itu tanggal?

Tanggal adalah bilangan yang menyatakan hari dalam sebulan,
waktu adalah rangkain saat ketika proses.

Dalam tutorial kali ini kita akan membahas mengenai Bagaimana cara menonaktifkan tanggal yang telah lalu di html dan javascript  tentunya ini sangat bermanfaat untuk kedepanya, karena banyak aplikasi aplikasi yang sangat membutuhkan cara ini.

Mengapa Tanggal harus dimatikan?

apa jadinya jika aplikasi yang kita buat masih mengaktifkan tanggal yang telah lalu? tentukan aplikasinya itu sangatlah buruk, bagaimana tidak, pelanggan bisa memesan tiket di tanggal yang lalu.

wahh ini sangat lah merugikan di sisi perusahaan, bisa2 malu donk kita sebagai programer kalau sampai terjadi

nah untuk itu saya akan membagikan ilmunya, oh iya jika tutorial kali ini tentang javascript tentunya teman teman harus melakukan hal ini di sisi server ya, karena ini hanya disisi front endnya saja, nanti  saya juga akan buatkan tutorial di sisi servernya dengan PHP 

oke langsung aja kita buat filenya dengan text editor sublime text atau bisa lainya seperti notepad++, Visual studio code dll

Berikut contoh kodenya 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Membuat Tanggal </title>
</head>
<body>
<p> Contoh : </p>
<input type="date" id="tanggal" >
<script type="text/javascript">
const tanggal = document.getElementById('tanggal').setAttribute("min", "2021-07-10");
</script>
</body>
</html>

Catatan : kode di atas masih statis silakan lanjut baca kebawah ya

Langkah Awal  

Buatlah file tanggal.html 

 Keterangan Kode 

 <input type="date" id="tanggal" > 

<input type = "date" adalah tag html untuk membuat tanggal berilah typenya "date"

id = "tanggal " adalah sebuat atribut yang memiliki isi tanggal 

const tanggal      = document.getElementById('tanggal').setAttribute("min", "2021-07-10");

 const        : adalah sebuah type data tetap 

tanggal      : nama variabel 

document.getElementById : Fungsi Javascript untuk mencari id pada tag HTML 

setAttribute : memiliki 2 parameter yaitu name dan valu, namenya kita isi (min) dan valuenya kita isi tanggal sekarang (2021-07-10) 

setelah kita set name dan valuenya maka itu artinya tanggal yg akan di non aktifkan min 2021-07-10

Berikut Hasil nya  :



bisa dilihat bahwa di bawah tanggal 10 tanggalnya sudak tidak dapat di klik atau di pilih

Berikut contoh kode yang kedua lebih lengkap lagi 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Membuat Tanggal </title>
</head>
<body>
<p> Contoh : </p>

<input type="date" id="tanggal" >


<script type="text/javascript">

var date = new Date();
var day = date.getDate()
var month = date.getMonth()+1
var year = date.getFullYear()
if(day < 10){
day = '0'+ day
}
if(month < 10){
month = '0'+month
}


var minDate = year +'-'+month+'-'+day
document.getElementById('tanggal').setAttribute("min", minDate);
</script>
</body>
</html>

Catatan : kode di atas sudah Dinamis

Kemudian jalankan kodenya dan lihat hasilnya, silakan di coba ya

Implementasi 

Saya kasih contoh aja beberapa aplikasi yang menggunakan metode menonaktifkan tanggal yang sudah lalu misalnya Aplikasi Pemesanan Tiket Pesawat, Travel, Tiket kreta dll

Dalam tutorial ini kita telah mengetahui bagaimana cara membuatnya tanggal yang lalu menjadi non aktif

Ikuti terus setiap seri dari Tutorial Javascript jika teman teman mendapati pertanyaan atau masalah, silakan tulis di kolom komentar.


Terima kasih.

Next Post Previous Post
No Comment
Add Comment
comment url
Advertisement here
Advertisement here
Advertisement here
Advertisement here