contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Cara Membuat Input Tanggal Detepticker Jquery

Posted in Javascript Jquery Life at 02 September 2017 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.  Dalam hal admin juga akan menjelaskan Cara merubah Format tanggal detepticker yang sebenarnya dapat anda lihat langsung pada website resminya di jQuery UI Datepicker Configuration Options.

Semua orang pasti ingin kemudahan.. walaupun sudah  saya berikan link langsung ke website resmi..pasti anda ingin mendapatkan artikel yang anda cari "CARA MEMBUAT INPUT TANGGAL DENGAN JQUERY DETEPTICKER" .. DISNI... oke langsung saja simak artikelnya     

▼ Download Source Code Dibawah Ini ▼


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