PHP Form Input Date with Datetimepicker JQuery

Case Study : Create Form Register with one of the field input using datetimepicker jquery.
Requirements :

  1. Webserver Packages, already installed.
  2. jQuery library, download here
  3. UI Core, download here, dan UI Datepicker, download here
  4. Theme Roller, download here, you can design your own theme, or download available theme. I used “sunny” theme.

Follow this steps.

Step 1 : Prepare the Work Folder

  1. Create folder named tutorphp in your document root
  2. Save file jQuery library, UI Core, UI Datepicker, and Theme (download above), so the structure of the folder is show below,

Step 2 : HTML – Form

  1. Type the following script,
    [sourcecode language=”php”]
    <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">
    <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>

  2. Save with the name form.php, and save in the tutorphp folder

Step 3 : Javascript – Datepicker

  1. Type the following script,
    [sourcecode language=”javascript”]
    function() {
    $(function() {
    showButtonPanel: true,
    //minDate: new Date(),
    showTime: true
  2. Save with the name tanggal.js, save in the tutorphp folder
  3. This Javascript will show datetimepicker jQuery in the field input with id tgl_lahir

Step 4 : PHP – Showing the Result

  1. Fo==Type the following script,
    [sourcecode language=”php”]
    $nama = $_POST[‘nama’];
    $alamat = $_POST[‘alamat’];
    $tgl_lahir = $_POST[‘tgl_lahir’];

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

  2. Save with the name form.php, and save in the tutorphp folder

Step 5 : Testing Code

  1. Go to http://localhost/tutorphp/form.php. You will see form like below. Fill the field, and then click input Tanggal field, so your datepicker will showed like below ๐Ÿ˜€
  2. Choose submit, and you will see the data ๐Ÿ˜€

Oleh littleflow3r

obviously, a girl. with sweet smile, off course. turning her 21 years trapped on Informatics departement and just started to having some crush with it lately. she uses wordpress. she loves php. she loves to satisfied her shopping hobbies just via looking around in online shop. oh yeah, she got an A for her english subject^^

4 replies on “PHP Form Input Date with Datetimepicker JQuery”

bu, saya coba aplikasikan koding di atas di CI 2.0, tp saat form_input di klik, ga ada event yg di jalankan. saya jquery 1.5.1 min.js..saya g bisa ganti karna jquery ini digunakan di page lain.ngaruh ga? ada demo yg bisa di dunlot?

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.