Kategori
PHP

Form Input Tanggal PHP dengan Datetimepicker JQuery

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,
    [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">
    <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>
    [/sourcecode]

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

Step 3 : Javascript – Pembaca Tanggal Datepicker

  1. Ketikkan script berikut,
    [sourcecode language=”javascript”]
    $(document).ready(
    function() {
    $(function() {
    $("#tgl_lahir").datepicker({
    showButtonPanel: true,
    //minDate: new Date(),
    showTime: true
    });
    });
    });
    [/sourcecode]
  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,
    [sourcecode language=”php”]
    <?php
    $nama = $_POST[‘nama’];
    $alamat = $_POST[‘alamat’];
    $tgl_lahir = $_POST[‘tgl_lahir’];

    echo $nama.'<br>’;
    echo $alamat.'<br>’;
    echo $tgl_lahir;
    ?>
    [/sourcecode]

  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

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^^

53 replies on “Form Input Tanggal PHP dengan Datetimepicker JQuery”

wah sama kasusY g mw tampil gambarY….backgroundY jd transparan… kalo disimpan jd 0000-00-00…harusY tipe dataY yg di database varchar biar g 0000…oke2 makasih tp cukup membantu (hungry)

mas ..
mau nanya kalo untuk me-nonaktifkan tanggal yang sudah lewat di jquery itu gmn caranya ya,mas ??
jadi nanti tanggal2 kemarin yang sudah lewat itu tidak bisa dipilih lagi ..
misalnya skrg tgl 27, brrti gak bisa lagi pilih tgl 26 atu 25 ..
mohon bantuannya ..
terima kasih ..
🙂

itu tanggalnya jadi kesimpan 0000-00-00 di mysql ,… karena format untuk masukin tanggalnya itu “tahun-bulan-tanggal” ,… sedangkan klo pake datepicker diatas ditulis “tanggal-bulan-tahun” makanya gak mau kesimpenn ,… 😎

saya sudah ikuti smua tutor di atas tapi kenapa tetap tidak bisa
kk mohon upload printscreen directori cara menyimpannya

saya bisa muncul transparant tapi setiap saya paste folder sunnynya malah gak bisa (funkydance)

aduh maaf text yang saya paste di kolom komen direplace jadi “untitled document” 🙁

pokonya intinya dalam folder tutorphp harus ada 3 folder library hasil download yaitu (css, development-bundle dan js).

buat yang tersesat sama tutor ini, saya bantu kasih pencerahan.
pertama download library lengkapnya di sini http://jqueryui.com/download
lalu extract semua file hasil download ke sembarang folder kalian.
copy ke 3 folder yaitu (css, development-bundle dan js) ke folder tutorphp kalian.

lalu copas di bawah ini save dgn form.php di dalam folder tutorphp

Untitled Document

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

Form Pendaftaran

Nama
Alamat
Tgl Lahir

*kalo belum bisa juga cek apakah file yang terletak di href, atau src pada file form.php tersedia/ganti yang mirip2. (biasanya pada baris src=”js/jquery-1.6.2.min.js” nama file nya beda tergantung versi file yang didownload)

Mas kalau mau sharing tolong diperiksa lagi dan dicoba lagi jadi gak bikin orang bukanya jelas malah pusing.
itu poin nomor 4 disave tampil.php -> sampean nulisnya malah form.php juga.

gimana sii mass ??
qo’ tanggalnya gx ada yg muncul, malah transparan gitu.
padahal aku kan udah mengikuti langkah-langkah diatas dengan baik dan teliti. tpi tetap gx bisa mass, kesalahan aku dimananya lagi tuh ?? mohon pencerahannya yaa ..
trimss .. x( (muscle) (idiot) (bringit) (angry)

🙂 😉 😆 😀 (yahoo) (rofl)

newbie neh…
sama dengan yang lain baru coba neh.tapi theme nya mang ga ada. malah theme tanggalnya warna transparan gitu.gmana ya kak?
help me please (worship)

pak/bu master.. ada yang tau gimana cara membuat input tanggal/waktu otomatis dari php trz dikirimkan ke mysql. dari mysql ditampilkan lagi ke php..??? help me?? (scenic) (thinking) (thinking)

Gan kalo ngubah setting DD/MM/YYYY itu dmn ya…???
saya udh bisa tampil, namun saya pingin ngubah settingnya ke setting tanggal Indonesia..
Mohon bantuannya gan…

Tinggalkan Balasan ke iie Batalkan 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.