Form Input Tanggal PHP dengan Datetimepicker JQuery

Case Study : Membuat form pendaftaran dengan salah satu input tanggal menggunakan datetimepicker jquery

Requirements :

Webserver Packages, already installed.
jQuery library, download here
UI Core, download here, dan UI Datepicker, download here
Theme Roller, download here, anda bisa mendesign tema sendiri untuk datepicker, atau mendownload theme yang sudah tersedia. Saya menggunakan theme dengan nama sunny.

Ikuti langkah-langkah dibawah.

Step 1 : Persiapkan Folder Kerja

Buat folder dengan nama tutorphp dalam document root anda
Simpan file jQuery library, UI Core, UI Datepicker, dan Theme (dapat didownload dari link bagian kebutuhan diatas),sehingga struktur folder seperti gambar berikut,

Step 2 : HTML – Form

Ketikkan script berikut,

<link type="text/css" rel="stylesheet" href="sunny/jquery-ui-1.8.2.custom.css" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="tanggal.js"></script>

<center><h1>Form Pendaftaran</h1>
<form method="post" action="tampil.php">
<table>
  <tr><td>Nama</td><td><input type="text" name="nama"></td></tr>
  <tr><td>Alamat</td><td><input type="text" name="alamat"></td></tr>
  <tr><td>Tgl Lahir</td><td><input type="text" id="tgl_lahir" name="tgl_lahir"></td></tr>
  <tr><td></td><td><input type="submit" name="submit" value="Submit"></td></tr>
</table>
</form>
</center>

simpan dengan nama form.php, dan simpan dalam folder tutorphp

Step 3 : Javascript – Pembaca Tanggal Datepicker

Ketikkan script berikut,

$(document).ready(
         function() {
       $(function() {
               $("#tgl_lahir").datepicker({
                  showButtonPanel: true,
                  //minDate: new Date(),
                  showTime: true
               });
            });
       });

simpan dengan nama tanggal.js, simpan dalam folder tutorphp
Script Javascript ini akan menampilkan datetimepicker jQuery pada bagian field input dengan id tgl_lahir

Step 4 : PHP – untuk menampilkan

Ketikkan script berikut,

<?php
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$tgl_lahir = $_POST['tgl_lahir'];

echo $nama.'<br>';
echo $alamat.'<br>';
echo $tgl_lahir;
?>

simpan dengan nama form.php, dan simpan dalam folder tutorphp

Step 5 : Testing Code

Pergi ke http://localhost/tutorphp/form.php. Anda akan melihat form seperti dibawah. Isikan field-filed, kemudian klik pada field input Tanggal, maka datepicker anda akan muncul seperti gambar dibawah:D
Pilih submit, maka data akan ditampilkan