Ketika kita memerlukan input berupa tanggal tentu akan sangat merepotkan jika menggunakan textfield sebagai inputannya, belum lagi kita sebagai developer harus membuat validasi untuk format input yang di berikan. Oleh karena itu, kita harus mencari cara lain yang lebih efektif untuk input berupa tanggal ini. Combobox / dropdown sebelumnya menjadi salah satu pilihan untuk menyimpan data dengan format tanggal, akan tetapi hal ini masih dirasa kurang efektif dan tidak user friendly.
Semenjak jQuery terus berkembang dengan plugin-pluginnya, kita tidak perlu di sibukkan dengan pemanfaatan combobox yang merepotkan tersebut. Sudah banyak developer yang membuat sebuah plugin untuk mengatasi masalah-masalah ini, salah satunya adalah dengan pemanfaatan plugin jQuery Datepicker.
Datepicker adalah sebuah program javascript berbentuk kalender untuk menginput atau memasukkan tanggal dengan valid dan sesuai dengan format yang diinginkan. Dengan datepicker kita dapat mempermudah validasi terhadap inputan user yang berupa tanggal, sehingga data yang dimasukkan bisa lebih valid guna mencegah user memasukkan tanggal yang tidak valid.
Salah satu plugin Datepicker yang akan kita bahas kali ini adalah Datepicker dari jQuery UI.
Contoh:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>Merubah Format Tanggal
Untuk merubah format tanggal gunakan opsi dateFormat dan isi dengan format tanggal yang di inginkan.
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: "yy-mm-dd"
});
});Menampilkan pilihan bulan dan tahun
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});Menampilkan Animasi
Kita juga bisa menampilkan animasi bagaimana kalender akan di munculkan dengan menggunakan opsi showAnim. Contoh jenis animasi yang dapat di gunakan antara lain: show (default), slideDown, fadeIn, blind, bounce, clip, drop, fold dan slide.
$(function() {
$( "#datepicker" ).datepicker({
showAnim: "slideDown"
});
});Resource
No Comments
Leave a comment Cancel