Salam hangat dan salam jumpa sodara2 skalian para pengunjung setia Nightwalker Team :-q~~ . Pada artikel kali ini , penulis akan mencoba sedikit berbagi tentang cara penggunakan function datepicker pada JQuery untuk input text yang data nya menggunakan format tanggal 
. Tentu ada sering menemukan input data yang berupa tanggal , misalnya pada sebuah formulir pendaftaran online yang terdapat input tanggal lahir , seperti di situs2 jejaring sosial (ex: facebook.com) .
Pada sekian banyak formulir pendaftaran di website yang penulis kunjungi , kebanyakan masih menggunakan input select option yang kemudian pada tanggal nya di lakukan perulangan dengan php seperti contoh gambar di bawah ini :
Nah , pada tutorial kali ini yang akan di bahas adalah bagaimana membuat input tanggal tersebut menjadi lebih menarik dan interaktif yaitu dengan menggunakan fungsi datepicker jquery seperti contoh gambar di bawah ini :
Jadi , ketika user atau pengunjung meng-klik pada bagian input text yang akan di gunakan sebagai input data tanggal , akan langsung muncul sebuah kotak dialog yang berisikan kalender . Dan apabila di klik pada salah satu tanggal pada kotak dialog kalender tersebut, akan masuk ke dalam input text yang digunakan untuk data tanggal .
Untuk dapat membuat input tanggal dengan fungsi datepicker jquery tersebut , anda tentu harus memiliki library jquery nya terlebih dahulu . Jika belum punya , silahkan anda mendownload nya di website resmi mereka yang ada di http://www.jquery.com , atau anda dapat langsung mendownload file contoh slengkapnya dari artikel ini , yang akan penulis berikan pada bagian penutup di akhir artikel ini .
Sebagai contoh silakan anda buat sebuah file bernama daftar.html , dan berikut ini listing code nya :
<html>
<head> <title> nightwalker team | datepicker jquery </title>
<link type=”text/css” href=”css/custom-theme/jquery-ui-1.7.2.custom.css” rel=”stylesheet” />
<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js”></script>
<script type=”text/javascript”>
$(function(){
// bufferdie love m…
$(‘#tanggal_lahir’).datepicker();
});
</script>
<style> body { font-size: 12px; } </style> </head>
<body> <div style=”text-align: center;”> <br> <h1> Registration </h1> <br>
<form method=”post” action=”">
Nama :<input type=”text” name=”nama” id=”nama”> <br>
Email :<input type=”text” name=”email” id=”email”> <br>
tanggal lahir : <input type=”text name=”tanggal_lahir” id=”tanggal_lahir”> <br>
password : <input type=”password” name=”paswot”> <br>
<input type=”submit” name=”submit” value=”register”> <input type=”reset” value=”clear”>
</form>
</div></body></html>
Pada code yang di cetak tebal di atas di gunakan untuk mengambil fungsi datepicker jquery dari file jquery pada direktori js dan css . Dan kemudian di deklarasikan ke dalam id value “tanggal_lahir” , lalu di panggil kembali dengan menggunakan input text yang juga ber id value “tanggal_lahir” .
Anda juga dapat merubah format tanggal dengan menambahkan option pada fungsi datepicker seperti contoh di bawah :
$(‘#tanggal_lahir’).datepicker({ dateFormat: ‘d MM, yy’ });
atau bisa juga dengan tambahan nama hari seperti contoh di bawah :
$(‘#tanggal_lahir’).datepicker({ dateFormat: ‘DD, d MM, yy’ });
Ok , mudah2an bermanfaat buat para web developer yang sedang mengerjakan aplikasi pendaftaran online ataupun para pngunjung yang sedang mendalami dunia web development .. Sampai Jumpa di artikel2 berikut nya 
Keren neh…. bisa didownload pula…
ahh , dek heni bisa aza ..
jadi malu , xixixixixi
hahahahaha……katanya malu, tp koq mukanya gak ditutupin ceh K, kan biasanya kl orng malu itu suka tutup muka gitu heuheu….ih curang ah, masa KK ada gambarnya, Hni gak ad gambarnya ceh…masa gambarnya gak ada mukanya gitu ceh…
keren om .
tapi saya pengen belajar lebih dalam lagi .
dari dasar ..
hihi*
tutorial yang kereeen!!
tapi saya ada pertanyaan..
bagaimana cara menghubungkan “select list” dengan calendar? Seperti pada website yang terdapat fungsi reservasi, misal, website airline (air asia, lion air dsb) terdapat dua pilihan input (kalender dan select list).
Jadi pada saat kita memilih tanggal di kalender, maka di select list akan ter-update sesuai dengan tanggal yang telah kita pilih, begitu juga sebaliknya.
Trima kasih sebelumnya.
Wow c mbah pnya web gg blg”..
keren..
kalo di atas nya ditambahin buat cari tahun sama bulan otomatis bisa ga,,,
contohnya kayak yg di apache…
jadi kalo mau input tanggal dari tahun2 yg jauh ga harus cari lama n jauh..
kalo bisa kasih tau ya…
thank’s bgt neh gan…….keren!!!! bermanfaat bgt
gan mau tanya neh….klo di pasang di jsp bisa ga???
setelah klinang-klinong bersama Mbah Google….akhir dapet juga CONTOH yang sangat INDAH ini.
Terima kasih
kalau menggunakan di atas saya udah pernah mencoba tapi hasilnya tahunnya di mulai dari 1989 dan untuk mengubahnya bagaimana ya???
oya tlg reply ke email saya y
gan kalo pgn format date indonesia gmn ?
thx
makasih ya…. sangat.sangat membantu
bagus Juragan… tapi kok tambah bingung ya…
kalau saya kombinasikan k script PHP qok variabel tanggal’a g d tangkep sama POST’a ya?jd default tanggal’a yang k save it ( 01-01-1970 ), Mohon Bantuannya, makasih.
om..
mau nanya dunkz,,
klo mau nampilin datepicker di dialog box nya jquery gimana ya om?
qo saya ga tampil tampil nih datepicker nya? :hammer:
pliss help me ooom… :’(
alert ” hai”
Gimana nampilin nama hari dari datepicker itu,
misalnya tampilnya menjadi :
Hari/Tanggal : Minggu, 23 Sept 2012.
Trimakasih.
SIIIIIP…..