Website ini sengaja saya buat untuk berbagi ilmu dengan teman-teman semua dan untuk mengingat kembali apa yang telah saya pelajari. Semoga website ini dapat bermanfaat untuk diri saya sendiri maupun teman-teman yang sudah berkunjung ke website saya selamat datang di website HadiKurniawan, bagi anda yang ingin berbagi atau mempublikasikan artikel di website ini, bisa kirimkan melalui fitur submit link yang terletak disudut bawah kanan pada website ini. terimakasih atas kunjungannya
Home » » Membuat Datepicker Pada Form Tanggal

Membuat Datepicker Pada Form Tanggal

Written By hadi kurniawan on Selasa, 05 Maret 2013 | 23.01

Datepicker merupakan teknik JQuery yang sering digunakan dalam pembuatan suatu aplikasi. Dengan menggunakan teknik ini akan memudahkan pengunjung dalam melakukan pengisian formulir untuk kolom tanggal, mungkin selama ini anda masih sering melihat dalam pengisan kolom tanggal  masih menggunakan option value, yaitu pemilihan satu persatu tanggal, bulan, dan tahun tanpa menggunakan tampilan yang menarik. Dengan sedikit sentuhan, yaitu menambahkan teknik datapicker ini, maka tampilan form tanggal anda akan menjadi jauh lebih menarik dan menjadikan website anda lebih profesional.





Langkah pertama buatlah program untuk menampilkan form tersebut,


<html>
<head>
 <title> Blog Tutorial - Datapicker </title>
</head>

<body>
<form action="aksi.php">
<center>
<h2>Membuat Datapicker</h2>
<table>
 <tr>
  <td>Nama</td>
  <td>: </td>
  <td><input type="text" name="nama"><td></tr> 
 <tr>
  <td>Tanggal Lahir</td>
  <td>:</td>
  <td> <input type="text" id="datepicker" name="tanggal"></td></tr>
  <tr>
  <td>Kota</td>
  <td>: </td>
  <td><input type="text" name="kota"><td></tr> 
</table>
 <input type="submit" value="Kirim">
 <input type="reset" value="Hapus">
</body>
</html>


Jika anda jalankan program tersebut, maka akan menghasilkan output seperti gambar dibawah ini


Jika anda mengisi pada kolom tanggal,
masih dalam pengisian manual.
karena program tersebut masih menampilkan form biasa saja.
untuk itu kita perlu menambahkan skript, agar pada kolom tanggal menjadi lebih menarik.

sebelum itu anda harus memiliki 4 library jquery dan beberapa file css untuk membuat tampilannya menarik. Jika anda belum memiliknya dapat anda download dilink dibawah ini:

DOWNLOAD DATEPICKER

password :  hadi


Jika anda sudah memilikinya, 

sekarang masih dalam program yang awal tadi,
tambahkan skript berikut dibawah kode <head>



<link rel="stylesheet" href="jquery/base/jquery.ui.all.css" type="text/css">
 <script type="text/javascript" src="jquery/jquery.js"></script>
 <script type="text/javascript" src="jquery/jquery.ui.core.js"></script>
 <script type="text/javascript" src="jquery/jquery.ui.datepicker.js"></script>
 <script type="text/javascript" src="jquery/jquery.ui.widget.js"></script>
 
 <script type="text/javascript">
 $(function() {
  $( "#datepicker" ).datepicker({
   changeMonth: true,
   changeYear: true
  });
 });
 </script>

Coba anda jalankan lagi program anda tadi.

jika berhasil. maka akan tampil seperti gambar dibawah ini, ketika anda ingin memasukkan tanggal.






Share this article :

+ komentar + 5 komentar

Anonim
19 Mei 2014 07.07

https://lh4.googleusercontent.com/-Ej-6WZQ4wFQ/UQ1SefEVGGI/AAAAAAAAACA/OrlFrVFyQvo/s30-p-k/coffee-cbd.png mantaf ...

2 Desember 2014 08.00

Terimakasih mas, tutorialnya sangat membantu....

Anonim
10 November 2015 10.40

ini untuk tampilan...bagaimana kalo kita mau edit data yang sudah kita inputkan tadi gan??

10 April 2016 17.37

Mas please please di share file css ny? Soalnya hasilnya pas mau input tgl jadi numpuk2..trmkasih

Anonim
27 Mei 2016 11.13

Tolong, kenapa saya coba datepickernya ga aktif ya? Apa yang salah..mohon bantuannya. Terima kasih

Posting Komentar

Semua Artikel Diblog ini boleh disebarluaskan,
asal mencantumkan sumbernya.

Terima kasih atas kunjungannya
Semoga artikel dblog ini bisa bermanfaat buat kita semua.
mohon kritik dan sarannya.
salam kenal dan salam Blogger Indonesia

 
Copyright © 2013. Catatan Hadi - All Rights Reserved
www.hadikurniawan.com