Membuat input tanggal menggunakan Datepicker

alfa6661
- December 10, 2015
0 (0 votes)
Rate :
Cara membuat input tanggal dengan menggunakan plugin Datepicker

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

  • https://jqueryui.com/datepicker/

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article