Ticker

6/recent/ticker-posts

Membuat Input Tanggal Pada Textbox Menggunakan JQuery UI Datepicker

Dalam membuat sebuah aplikasi terkadang kita membuat inputan untuk tanggal misalnya tanggal lahir atau tanggal invoice, dan pada proses penginputan data tanggal tersebut kita sering mengalami kesalahan terutama dalam penulisan format tanggal, oleh karena itu diperlukannya bantuan atau fasilitas untuk memudahkan user / pengguna dalam memasukan tanggal. Pada artikel ini akan di jelaskan bagaiman membuat fasilitas tersebut dengan menggunakan JQuery Datepicker.

JQuery Datepicker adalah salah satu jquery yang sering digunakan dalam memilih tanggal, bulan, dan tahun. jQuery Datepicker cukup populer dikalangan web designer karena jQuery Datepicker memberikan kemudahan bagi pengguna website.

Berikut langkah penggunaan JQuery Datepicker,
1. Download JQuery UI di link Berikut, kemudain lakukan ekstrak file yang di download tersebut.

2. Buat folder js untuk menyimpan file jquery-1.10.2.js dan  jquery-ui.js. Folder themes untuk menyimpan file style jquery-ui.css.

3. Include-kan file css dan js yang ada dalam folder ter-ekstrak tadi ke dalam tag <head> seperti berikut

<head>
<title>Sample Datepicker</title>
<link rel="stylesheet" href="themes/smoothness/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="ui/jquery-ui.js"></script>
</head>


4. Tuliskan script untuk memanggil datepicker,

<script type="text/javascript">
$(function() {
      $("#datepicker").datepicker();
});
</script>


5. Buat tag HTML nya,

<p><input type="text" id="datepicker"></p>

6. Berikut hasil dari script datepicker diatas














Script keseluruhan untuk memanggil datepicker

<html>
<head>
<title>Sample Datepicker</title>
<link rel="stylesheet" href="themes/smoothness/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="ui/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
  $("#datepicker").datepicker();
});
</script>
</head>
<body>
<p><input type="text" id="datepicker"></p>
</body>
</html> 


Selamat mencoba dan semoga bermanfaat.

Posting Komentar

2 Komentar

  1. yang di didownload jquery nya versi yang mana?
    dan filenya banyak ketika di ekstrak, apakah cukup yang tiga itu saja yang di copy?
    thanks

    BalasHapus
    Balasan
    1. Lebih bagusnya pake jQuery versi yang terbaru.
      Untuk file yang dibutuhkan cukup dengan 3 file itu saja untuk menampilkan datepicker. Terima kasih

      Hapus