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,
    <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>
    
  2. Save with the name form.php, and save in the tutorphp folder

Step 3 : Javascript – Datepicker

  1. Type the following script,
    $(document).ready(
             function() {
       		  $(function() {
                   $("#tgl_lahir").datepicker({
                      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,
    <?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 :D
  2. Choose submit, and you will see the data :D

Hal yang juga menarik:

Hak Cipta

Semua skrip dan teknik dalam artikel di itx.web.id boleh digunakan sebagaimana kehendakmu tanpa perlu mencantumkan sumber. Kamu tidak boleh mengkopi seluruh artikel, dalam Bahasa Indonesia ataupun diterjemahkan ke dalam bahasa lain.


Related Articles:

Artikel terkait:

: PHP

About the author

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 lo

4 Comments

Tinggalkan Balasan

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

x( X-( B-) ;-) :wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :D :?: :-| :-x :-o :-P :-D :-? :-)) :-) :-( :-& :) :( :!: 8-O 8-) 8) (Русский) (yahoo) (worship) (woot) (wave) (unsure) (tongue) (thinking) (tears) (taser) (smileydance) (sleeping) (sick) (scenic) (rofl) (rock) (party) (panic) (okok) (nottalking) (ninja) (music) (muscle) (muhaha) (money) (mmm) (lonely) (lol) (lmao) (idiot) (hungry) (highfive) (heart_beat) (heart) (headspin) (hassle) (haha) (gym) (griltongue) (goodluck) (girlkiss) (funkydance) (fish_hit) (eyeroll) (evilsmirk) (evil_grin) (drinking) (doh) (devil) (dance) (cry) (cozy) (coffee) (brokenheart) (bringit) (blush) (bigeyes) (beer) (banana_rock) (banana_ninja) (banana_cool) (applause) (annoyed) (angry) (K) (: