Pada postingan saya sebelumnya saya menjelaskan bagaimana cara menambahkan datepicker dengan jquery pada sebuah website. Dalam postingan kali ini masih berhubungan dengan bagaimana menambahkan datepicker dengan jquery namun dengan tambahan yaitu modifikasi datepicker yang kita gunakan agar sesuai dengan keinginan.
Adapun disini saya akan membaginya kedalam beberapa contoh kasus, yaitu :
1. Datepicker dengan tampilan menggunakan bahasa indonesia
Untuk dapat menggunakan datepicker dengan menggunakan bahasa indonesia dibutuhkan sebuah library lagi yaitu ui.datepicker-id.js. darimana anda dapat mendapatkannya? jangan khawatir semua contoh yang ada disini saya sediakan filenya sehingga nanti anda dapat mendownloadnya.
Langkahnya sebagai berikut :
- tambahkan script berikut di antara <head> dan </head> script ini dapat anda tambahkan dibawah script pada artikel sebelumnya mengenai cara menambahkan datepicker dengan jquery :
<script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>lengkapnya scriptnya akan seperti dibawah ini :
<link type="text/css" href="../themes/base/ui.all.css" rel="stylesheet" />untuk pemanggilannya pun masih sama seperti pada posting saya sebelumnya mengenai cara menambahkan datepicker dengan jquery yaitu dengan menggunakan id="dtp" contoh :
<script type="text/javascript" src="../lib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../lib/ui.core.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dtp").datepicker();
});
</script>
Masukan Tanggal : <input id="dtp" type="text">Hasil dari contoh diatas adalah sebagai berikut :
2. Merubah format tanggal datepicker
Sebelum kita melakukan modifikasi format tanggal datepicker masih berbentuk "mm/dd/yyyy" contoh tanggal 21 September 2010 maka akan ditulis dengan bentuk "09/21/2010". Agar dapat dirubah formatnya sesuai dengan keinginan kita maka kita akan menggunakan sebuah fungsi dari datepicker dengan nama dateFormat.
Langkahnya adalah sebagai berikut :
- Pada postingan saya yang sebelumnya mengenai cara menambahkan datepicker dengan jquery anda tentunya akan menemukan script berikut :
<script type="text/javascript">Sebagaimana disebutkan diatas bahwa untuk merubah format dari datepicker kita akan menggunakan fungsi dari datepicker dengan nama dateFormat. Fungsi ini akan kita letakan pada script diatas sehingga nantinya script akan menjadi sebagai berikut :
$(document).ready(function(){
$("#dtp").datepicker();
});
</script>
<script type="text/javascript">Nah nantinya jika sudah ditambahkan fungsi tersebut diatas secara lengkap script akan menjadi sebagai berikut :
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy"
});
});
</script>
<link type="text/css" href="../themes/base/ui.all.css" rel="stylesheet" />Hasil dari contoh diatas adalah sebagai berikut :
<script type="text/javascript" src="../lib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../lib/ui.core.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy"
});
});
</script>
Seperti yang dapat anda lihat pada contoh-contoh diatas dan juga pada postingan saya sebelumnya mengenai cara menambahkan datepicker dengan jquery terlihat bahwa bulan dan tahun tidak dapat langsung dipilih pada bulan atau tahun tertentu. kita harus mengklik tombol panah yang ada hingga mendapatkan bulan dan tahun yang diinginkan. tentunya akan sangat merepotkan bila bulan dan tahun yang anda ingin pilih memiliki rentang yang cukup jauh dengan bulan dan tahun sekarang. Untuk mempermudahnya kita bisa memodifikasi datepicker dengan menampilkan combobox pilihan bulan dan tahun dengan menggunakan fungsi changeMonth dan changeYear.
Langkahnya adalah sebagai berikut :
- Pada contoh sebelumnya kita telah menambahkan sebuah fungsi yaitu dateFormat. Penempatan fungsi changeMonth dan changeYear tidak jauh berbeda dengan contoh sebelumnya jadi pada script berikut :
<script type="text/javascript">kita tambahkan saja script ini :
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy"
});
});
</script>
changeMonth: true,Berikut script lengkapnya :
changeYear: true
<link type="text/css" href="../themes/base/ui.all.css" rel="stylesheet" />Hasil dari contoh diatas adalah sebagai berikut :
<script type="text/javascript" src="../lib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../lib/ui.core.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy",
changeMonth: true,
changeYear: true
});
});
</script>
Kita dapat menggunakan button untuk menampilkan datepicker adapun button tersebut bisa kita buat lebih menarik dengan menggunakan sebuah image semisal gambar berikut :
Berikut langkahnya :
- Siapkan terlebih dahulu image yang akan gunakan untuk button anda bisa menggunakan gambar diatas (save as) ataupun menggunakan image yang ada pada file contoh yang bisa anda download kemudian.
- Pada script berikut :
<script type="text/javascript">tambahkan script :
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy"
});
});
</script>
showOn: "button",jadi kalau kita gabungkan dengan contoh sebelumnya maka scriptnya akan menjadi seperti berikut :
buttonImage: "../image/cal.gif",
buttonImageOnly: true
<link type="text/css" href="../themes/base/ui.all.css" rel="stylesheet" />Hasil dari contoh diatas adalah sebagai berikut :
<script type="text/javascript" src="../lib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../lib/ui.core.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy",
changeMonth: true,
changeYear: true,
showOn: "button",
buttonImage: "../image/cal.gif",
buttonImageOnly: true
});
});
</script>
Anda dapat merubah tampilan standar datepicker tentunya dengan mendownload terlebih dahulu themenya. Tapi saya sudah sertakan beberapa theme yang dapat anda gunakan pada file contoh yang anda dapat download nanti.
Langkahnya sebagai berikut :
- Seperti dilihat dari script sebelumnya bahwa untuk tampilan datepicker didukung dengan adanya file *.css anda bisa melihatnya pada script berikut :
<link type="text/css" href="../themes/base/ui.all.css" rel="stylesheet" />Untuk merubah theme dari datepicker maka setelah theme anda miliki anda cukup merubah script diatas misalnya menjadi :
<link type="text/css" href="../themes/le-frog/ui.all.css" rel="stylesheet" />Sehingga nantinya keseluruhan script akan menjadi seperti berikut :
<link type="text/css" href="../themes/le-frog/ui.all.css" rel="stylesheet" />Hasil dari contoh diatas adalah sebagai berikut :
<script type="text/javascript" src="../lib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../lib/ui.core.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker.js"></script>
<script type="text/javascript" src="../lib/ui.datepicker-id.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy",
changeMonth: true,
changeYear: true,
showOn: "button",
buttonImage: "../image/cal.gif",
buttonImageOnly: true
});
});
</script>
File contoh dapat anda download di download modifikasi datepicker dengan jquery.
11 comments:
kang klo mau ganti format tanggalnya jadi
"yyyy-MM-dd" contohnya "2010-09-28" gimana ya kang/???
maaf banyak nanya coz baru newbie ne...
pada contoh yang kedua kan bentuk scriptnya seperti berikut ini :
<script type="text/javascript">
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy"
});
});
</script>
pada bagian dateFormat tinggal dirubah saja menjadi : yy m dd atau kalau mau ditambahkan tanda - sebagai pemisah tanggal rubah menjadi : yy-m-dd
mas kalo mau ngubah range tahunnya gmna ya?
misalkan tahun yang ditampilkan min 10 tahun dari skarang? terimaksih ilmunya..
@uci:
tambahin aja rule berikut :
yearRange: "-10:+10"
contohnya seperti berikut :
<script type="text/javascript">
$(document).ready(function(){
$("#dtp").datepicker({
dateFormat: "dd MM yy",
changeMonth: true,
changeYear: true,
showOn: "button",
buttonImage: "../image/cal.gif",
buttonImageOnly: true,
yearRange: "-10:+10"
});
});
</script>
dengan menggunakan
yearRange: "-10:+10"
nanti tahunnya akan tampil 10 tahun kebelakang dan 10 tahun kedepan..
tinggal utak atik aja valuenya..
mas yg dateFormat kok g bs ya, db sy jg 'yyyy-mm-dd' dah cb kaya yg mas blg diatas, tp tetap aja g berasil msk k db, jadinya 0000-00-00... gmn ya mas... thx a lot sharingnya...
@e_one:
untuk input ke db sama saja seperti input text biasa..
$qry = mysql_query = ("INSERT INTO abc (tanggal) VALUES ('$_POST[txttanggal]')");
maaf mas maksud saya query dah bener, datepickernya dah ok kaya yang mas terangin diatas, di form inputnya jg dah ok, tp knp ya hsl insert jd : 0000-00-00, pdhl dah cb :
dateFormat: "yy mm dd" --> y sy ubah biar sm dgn db
tlg pencerahan mas..thx..
@e_one:
struktur di dbnya untuk tanggal typenya date kan?
type date di sql, format yang diterimanya adalah yy-mm-dd
cth : 2011-02-21
kalau mas mendeklarasikannya dengan
dateFormat: "yy mm dd"
coba tambahin - aja mas
jadinya nanti gini :
dateFormat: "yy-mm-dd"
mas kalau mau filtering data dari database menggunakan 2 datepicker pada periode tanggal tertentu, misalnya antara tanggal 2 feb 2011 sampai 3 maret 2011 gimana? bantu skrip nya iah... Trims
@Zhiquark personal Blog:
Kalo mau gampang di databasenya kamu buat dipisah jadi ada 2 field misal ada field tglawal(untuk nyimpen tanggal 2 feb 2011) & field tglakhir(untuk nyimpen tanggal 3 maret 2011)..
nah nanti tglawal(2 feb 2011) ditampilin di datepicker pertama dan tglakhir(3 maret 2011) ditampilin di datepicker satunya..
Post a Comment