halo teman-teman, bertemu lagi pada tutorial dumet school, kali ini saya akan mencontoh kan bagaimana cara memasang jquery zebra_datepicker,

datepicker biasa digunakan pada form inputan tanggal, daripada kita harus membuat looppingan tanggal,bulan dan tahun dengan php, lebih efisien kita menggunakan jquery datepicker,

jquery datepicker banyak macamnya, kali ini saya menggunakan zebra datepicker, bagi yang mau download bisa download disini:

https://onedrive.live.com/?authkey=%21AOKe4ekqg1yXjRg&cid=A24ABA6A7DF3D58E&id=A24ABA6A7DF3D58E%21119&group=0&parId=A24ABA6A7DF3D58E%21118&action=locate

oke langsung saja teman-teman buat sebuah file dan ketikan script berikut:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>

</head>

<body>
<form>
<input type=”text” class=”datepicker” name=”tanggal” required />
</form>
</body>
</html>

 

jika sudah save file tersebut didalam sebuah folder,

lalu kita akan menghubungkan jquery yang kita download tadi caranya sebagai berikut :

 

<script src=”datepicker/lib/jquery.min.js” type=”text/javascript”></script>
<script src=”datepicker/lib/zebra_datepicker.js” type=”text/javascript”></script>
<link href=”datepicker/lib/css/default.css” rel=”stylesheet” type=”text/css”></link>

sesuaikan direktori dari letak jquery dan cssnya nya ya,,

lalu teman teman ketikan script berikut untuk menjalankan jquery yang telah kita hubungkan tadi,

<script>
$(document).ready(function() {
$(‘input.datepicker’).Zebra_DatePicker();
});

</script>

letakan script berikut di antara tag head,

jika teman teman benar maka hasilnya akan seperti berikut :

hasil

oke selamat mencoba ya teman teman 🙂 terimakasih..