Cara Membuat Input Tanggal Detepticker Jquery

Publish Date : 02-09-2017 , dibaca 14983 kali, Hari ini dibaca : 1 kali ,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

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.

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:

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>