j-Query : Datepicker

Datepicker

Bagi para developer web mesti tidak merasa asing lagi dengan jQuery DatePicker. Ini biasa digunakan dalam pengembangan web yang memerlukan input penanggalan berdasarkan kalender yang dilekatkan pada bidang form input.

Cara kerja yang sederhana, DatePicker ini berfokus pada input (klik, atau menggunakan tombol tab) untuk membuka sebuah kalender interaktif dengan sedikit overlay. Pilih tanggal, klik di tempat lain pada halaman (blur input), atau tekan tombol Esc untuk menutup. Jika tanggal yang dipilih, umpan balik ditampilkan sebagai nilai input.

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.

Secara default, kalender datepicker terbuka dengan sedikit overlay ketika bidang teks terkait mencapai fokus. Untuk kalender inline, cukup melampirkan datepicker dengan div atau span.

Sekarang kita buat form input sederhana sebagai tampilan inputannya.

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

Beberapa file jQuery dibawah ini perlu ditambahkan untuk menampilkan inputan penanggalan supaya jQuery DatePicker ini bisa berfungsi dengan baik, terdapat dua JavaScript dan satu stylesheet jQuery:

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

Kita masukan ketiga file di atas setelah elemen

<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>

Kita tambahkan sedikit style untuk melengkapi tampilan akhir nanti.

<style>
body {
background: #f5f5f5;
margin: 0;
padding: 20px 0 0 0;
text-align: center;
font-size: 16px;
}
h1 {
color: #222;
font-size: 24px;
}
style>

Berikut ini script lengkap cara membuat input tanggal dengan jQuery DatePicker menjadi seperti ini.



 
 jQuery UI Datepicker Sederhana
  
 
 
 


jQuery UI DatePicker Sederhana

   
   


Jika berhasil tampilan akhirnya akan seperti ini:

Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. 🙂

Spread the love

Fajar (Ucup)

Pemilik dan Author dari FajarYusuf.com dan juga seseorang yang gemar membagikan info menarik kepada orang lain.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *