Membuat Datepicker Pada Form Tanggal

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

Jika anda mengisi pada kolom tanggal,
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>