Fungsi Datepicker JQuery untuk Input Tanggal

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 :

Registration

Nama  :


Email :


tanggal lahir :


password :

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 :lol:
DOWNLOAD

sumber : http://www.night-walker.org/fungsi-datepicker-jquery-untuk-input-tanggal.nw