Datepicker merupakan teknik JQuery yang sering digunakan dalam pembuatan suatu aplikasi. Dengan menggunakan teknik ini akan memudahkan pengunjung dalam melakukan pengisian formulir untuk kolom tanggal, mungkin selama ini anda masih sering melihat dalam pengisan kolom tanggal masih menggunakan option value, yaitu pemilihan satu persatu tanggal, bulan, dan tahun tanpa menggunakan tampilan yang menarik. Dengan sedikit sentuhan, yaitu menambahkan teknik datapicker ini, maka tampilan form tanggal anda akan menjadi jauh lebih menarik dan menjadikan website anda lebih profesional.
Langkah pertama buatlah program untuk menampilkan form tersebut,
<html>
<head>
<title> Blog Tutorial - Datapicker </title>
</head>
<body>
<form action="aksi.php">
<center>
<h2>Membuat Datapicker</h2>
<table>
<tr>
<td>Nama</td>
<td>: </td>
<td><input type="text" name="nama"><td></tr>
<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td> <input type="text" id="datepicker" name="tanggal"></td></tr>
<tr>
<td>Kota</td>
<td>: </td>
<td><input type="text" name="kota"><td></tr>
</table>
<input type="submit" value="Kirim">
<input type="reset" value="Hapus">
</body>
</html>
Jika anda jalankan program tersebut, maka akan menghasilkan output seperti gambar dibawah ini
masih dalam pengisian manual.
karena program tersebut masih menampilkan form biasa saja.
untuk itu kita perlu menambahkan skript, agar pada kolom tanggal menjadi lebih menarik.
sebelum itu anda harus memiliki 4 library jquery dan beberapa file css untuk membuat tampilannya menarik. Jika anda belum memiliknya dapat anda download dilink dibawah ini:
DOWNLOAD DATEPICKER
password : hadi
Jika anda sudah memilikinya,
sekarang masih dalam program yang awal tadi,
tambahkan skript berikut dibawah kode <head>
<link rel="stylesheet" href="jquery/base/jquery.ui.all.css" type="text/css"> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript" src="jquery/jquery.ui.core.js"></script> <script type="text/javascript" src="jquery/jquery.ui.datepicker.js"></script> <script type="text/javascript" src="jquery/jquery.ui.widget.js"></script> <script type="text/javascript"> $(function() { $( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); }); </script>
Coba anda jalankan lagi program anda tadi.
jika berhasil. maka akan tampil seperti gambar dibawah ini, ketika anda ingin memasukkan tanggal.
https://lh4.googleusercontent.com/-Ej-6WZQ4wFQ/UQ1SefEVGGI/AAAAAAAAACA/OrlFrVFyQvo/s30-p-k/coffee-cbd.png mantaf ...
BalasHapusTerimakasih mas, tutorialnya sangat membantu....
BalasHapusini untuk tampilan...bagaimana kalo kita mau edit data yang sudah kita inputkan tadi gan??
BalasHapusMas please please di share file css ny? Soalnya hasilnya pas mau input tgl jadi numpuk2..trmkasih
BalasHapusTolong, kenapa saya coba datepickernya ga aktif ya? Apa yang salah..mohon bantuannya. Terima kasih
BalasHapus