contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Cara Membuat Input Tanggal Detepticker Jquery

Posted in Javascript Jquery Life at 10 April 2016 With 0 Comments

Postingan Kali ini kita akan Membuat Input Tanggal Detepticker dengan Jquery,,, Bagi anda yang membuat aplikasi tentu ini sangat dibutuhkan mengingat usebility yang harus kita perhitungkan dalam membuat sebuah aplikasi.

JQuery UI Datepicker adalah plugin sangat dapat dikonfigurasi yang menambahkan fungsi datepicker ke halaman Anda. Anda dapat menyesuaikan format tanggal dan bahasa, membatasi rentang tanggal yang dipilih dan menambahkan tombol dan pilihan navigasi lainnya dengan mudah.



cara input tanggal detepticker dengan jquery

OK mari kita mulai tutorial membuat input tanggal dengan jquery detepticker

Cara Membuat Input tanggal Detepticker dengan Jquery

Sekarang kita buat form input sederhana sebagai tampilan inputannya.

<h1>jQuery UI DatePicker Sederhana</h1>
<form>
    <label>Tanggal: </label>
    <input type="text" id="datepicker" />
</form>

Sertakan kebutuhan Jquery , agar detepticker dapat berjalan dan berfungsi, download dibawah ini:

  1. jquery.js
  2. jquery-ui.js
  3. jqueri-ui.css

masukan ketiga file di atas setelah elemen <head>

<link rel="stylesheet" href="jquery-ui.css" type="text/css"/>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>

Nah, script ini yang paling penting untuk dimasukan, lihat atribut id yang tertera di dalam form input dengan yang diberi nilai datepicker, sehingga script-nya dibuat:

<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
</script>

Untuk Full Script nya lihat dibawah ini :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery Detepticker Suckittrees.com</title>
  <link rel="stylesheet" href="jquery-ui.css" type="text/css"/>
  <script src="jquery-1.10.2.js" type="text/javascript"></script>
  <script src="jquery-ui.js" type="text/javascript"></script>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
<h1>jQuery UI DatePicker Sederhana</h1>
<form>
    <label>Tanggal: </label>
    <input type="text" id="datepicker" />
</form>

</body>
</html>

Jika anda berhasil, maka tampilanya akan sama seperti gambar diatas.

Gimana.. bisa kan... Demikian artikel Cara Membuat tanggal detepticker dengan jquery,  semoga artikel ini dapat bermanfaat

Artikel Terkait

Diskusi