Case Study : Membuat form pendaftaran dengan salah satu input tanggal menggunakan 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, 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

  1. Buat folder dengan nama tutorphp dalam document root anda
  2. 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

  1. 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>
    
  2. simpan dengan nama form.php, dan simpan dalam folder tutorphp

Step 3 : Javascript – Pembaca Tanggal Datepicker

  1. Ketikkan script berikut,
    $(document).ready(
             function() {
       		  $(function() {
                   $("#tgl_lahir").datepicker({
                      showButtonPanel: true,
                      //minDate: new Date(),
                      showTime: true
                   });
                });
       	   });
    
  2. simpan dengan nama tanggal.js, simpan dalam folder tutorphp
  3. Script Javascript ini akan menampilkan datetimepicker jQuery pada bagian field input dengan id tgl_lahir

Step 4 : PHP – untuk menampilkan

  1. Ketikkan script berikut,
    <?php
    $nama = $_POST['nama'];
    $alamat = $_POST['alamat'];
    $tgl_lahir = $_POST['tgl_lahir'];
    
    echo $nama.'<br>';
    echo $alamat.'<br>';
    echo $tgl_lahir;
    ?>
    
  2. simpan dengan nama form.php, dan simpan dalam folder tutorphp

Step 5 : Testing Code

  1. 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
  2. Pilih submit, maka data akan ditampilkan

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.

Pencarian ke sini:

membuat php input dan cari data berdasar tanggal dan tahun, jquery datepicker php, Memasukan taggal dinamis di php, fcara tampil tanggal pda php dari localhost, membuat date time picker, membuat datetimepicker di web, membuat id dengan tanggal dan jam php, menampilkan tanggal pada saat input tanggal php, script program cara menampilkan tanggal secara otomatis di web, cara mambuat kalender dan jam otomatis di dreamweaver dengan file php, javascript tanggal di php dan mysql, input tanggal ke listbox, input tanggal dinamis di php, cara pilih tanggal kalender php, Cara mendisable tanggal yang sudah lewat di php, cara membuat daftar nama dan tanggal ulang tahun secara otomatis, cara memakain fungsi onchange pada jquery text tanggal PHP, cara masukan tgl lahir di script php, tanggal indonesia namun saat akan disimpan masuk ke inggris pada php.

This post is also available in: English


Related Articles:

: 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

52 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *