Cara Membuat Input tanggal dengan Jquery UI DatePicker

Update Terakhir pada

Bagi para web developer pasti tidak akan asing dengan Jquery. Jquery adalah Javascrpt Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Sedangkan Jquery UI Datepicker adalah plugin Jquery yang dapat dikonfigurasikan untuk menambahkan fungsi kalender ke halaman web. Untuk menambahkan nya di halaman web kita pertama kita harus mengunduh Jquery UI di halaman http://Jqueryui.com seperti gambar di bawah ini

Selanjutnya download versi Jquery yang diinginkan.

Ketikkan kode berikut, simpan dengan nama datepicker.html :

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel=”stylesheet” type=”text/css” href=”jquery-ui-1.12.1.custom/jquery-ui.css”>

<script src=”jquery-ui-1.12.1.custom/external/jquery/jquery.js”></script>

<script src=”jquery-ui-1.12.1.custom/jquery-ui.js”></script>

<script src=”jquery-ui-1.12.1.custom/jquery-ui.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”jquery-ui-1.12.1.custom/jquery-ui.theme.css”>

<script>

$(document).ready(function(){

$(“#tanggal”).datepicker({

 

})

})

</script>

</head>

<body>

Tanggal : <input type=”text” name=”tanggal” id=”tanggal”><!–fungsi id=tanggal untuk memanggil datepicker–>

</body>

</html>

 

Jika berhasil tampilanya akan seperti ini :

Selamat mencoba J

By Sriayu Windarti