Ternyata Mudah menggunakan Datepicker di PHP dengan Memanfaatkan JQuery

Akhirnya saya update blog ini. Sudah lama sekali(baca:hampir 2 bulan) saya belum sempat posting data baru. Berhubung belakangan sedang banyak bergelut dengan PHP, maka kali ini saya akan memberikan(baca:menyampaikan) tutorial tentang penggunakan datepicker dengan memanfaatkan jquery.

Berikut ini adalah script untuk menampilkan 1 input box yang meminta pemilihan tanggal:
Date: <input id="datepicker" name="datepicker" type="text">

Sedangkan untuk meminta pemilihan tanggal dari dan sampai dapat digunakan script seperti ini:
From <input id="from" name="from" type="text">
To <input id="from" name="from" type="text">

Untuk dapat menggunakan script diatas, maka harus ditambahkan script jquery
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true
});
});
</script>

<script type="text/javascript">
$(function() {
var dates = $('#from, #to').datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate";
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
</script>

Selain itu untuk menggunakan datepicker diatas harus include file css dan js yang lain. File ini dapat didownload di sini.
Apabila masih bingung dapat download script lengkap tutorial ini di sini

Intinya mudah sekali menggunakan datepicker ini ^_^. Selamat mencoba

4 komentar:

  1. Salam Kenal dariku, nice artikel :D Sekalian mau bilang Met Puasa bagi yang puasa. Met sejahtera bagi yang gak njalanin. Semoga selamat & damai dimuka Bumi. Amin :D

    BalasHapus
  2. waaahhhh saya gak ngerti PHP :D

    BalasHapus
  3. Maaf mbak, mau tanya..
    klo jquery datepicker untuk format datetime.., kira2 ada gk ya mbak..?
    Mohon Penjelasannya... Terima kasih :)

    BalasHapus
  4. @anonim, silahkan lihat tutorial di http://blogs.uct.ac.za/blog/lovemores-world/2009/02/25/an-effective-jquery-date-time-picker dan http://jonathonhill.net/2009-03-27/jquery-datetime-picker/

    BalasHapus