Membuat jQuery Datepicker

0 142

Datepicker adalah pilihan bagus yang disediakan dengan antarmuka pengguna untuk memudahkan pengguna memilih tanggal dalam format yang benar. Pada artikel ini, kita akan menambahkan datepicker ke halaman web, menggunakan plugin jQuery.

Plugin jQuery Datepicker dilengkapi dengan berbagai pilihan dan metode, yang digunakan untuk menyesuaikan antarmuka pengguna datepicker dan widget kalender.

Untuk melihat bagaimana menambahkan plugin ini untuk memberikan antarmuka pengguna datepicker ke halaman web. Dengan contoh ini, pertama, kita akan menampilkan kalender secara default tanpa menggunakan penyesuaian apapun dengan bantuan opsi dan metode yang diberikan.

Untuk menambahkan pemetik tanggal jQuery, kita harus mengikuti langkah-langkah berikut.

  • Tambahkan file pustaka javascript seperti biasa seperti yang telah kita lakukan dengan pengendali event jQuery lainnya, seperti, Drag / Drop, Show / Hide dan lain-lain, untuk mengakses metode dan opsi jQuery yang dibutuhkan.
  • Link halaman web dengan CSS eksternal yang berisi gaya untuk tema kalender.
  • Ajukan penangan event datepicker untuk menampilkan widget kalender sebagai popup.
<html>
<head>
<title>JQuery DatePicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#txtDate" ).datepicker();
});
</script>
</head>
<body>
<div>Select Date: <input type="text" id="txtDate" /></div>
</body>
</html>

Dalam kode di atas, kami telah menambahkan perpustakaan Javascript yang dibutuhkan sebagai sumber untuk mengakses fungsi jQuery built-in. Untuk itu, kita bisa merujuk pustaka ini baik dengan menggunakan URL langsung yang membutuhkan internet atau kita bisa membuat salinan lokal dari file ini dengan mendownload versi terbaru dari situs resmi jQuery.

Setelah itu, pemetik tanggal () dipanggil dengan referensi id elemen masukan HTML. Jadi, secara default, elemen input adalah target, dimana tanggal yang dipilih akan ditampilkan, dan juga, digunakan untuk memicu event ke popup calendar widget.

Jika kita ingin memiliki dua elemen secara terpisah, karena memicu acara pemetik tanggal dan untuk mengisi respons, kita perlu memilih opsi dan metode plugin jQuery yang ada.

Metode Pilihan Datepicker di jQuery

Ada beberapa pilihan dan metode yang disediakan oleh plugin Datepicker jQuery. Sebagai contoh, daftar berikut berisi beberapa pilihan plugin jQuery yang digunakan untuk menyesuaikan pengaturan pemetik tanggal.

Pilihan

  • buttonImage – Pilihan ini berisi path atau nama gambar yang akan ditampilkan, dengan mengklik widget kalender yang akan menjadi popup.
  • buttonImageOnly – Pilihan pemetik tanggal ini hanya untuk menampilkan gambar tanpa efek tombol di sekitarnya.
  • buttonText – Pilihan ini seperti atribut alt tag HTML <img>, yang digunakan untuk menampilkan teks alternatif yang diberikan jika ada masalah dalam menampilkan gambar ke browser.
  • showOn – Ini dapat berisi nilai seperti fokus, tombol dan keduanya ke widget kalender popup dengan kejadian masing-masing, seperti pada bidang masukan target fokus, saat mengklik sebuah tombol.
  • dateFormat – Seperti yang bisa kita tebak dengan mudah untuk opsi ini, ini untuk memberi format yang dibutuhkan pada tanggal yang dipilih.
  • minDate, maxDate – Ini akan menunjukkan jumlah minimum dan maksimum tanggal yang dapat dipilih.

Semua pilihan termasuk opsi yang tidak disebutkan dalam daftar di atas, digunakan untuk menerapkan perubahan sehubungan dengan pemilih tertentu.

Mari kita memiliki contoh untuk bekerja dengan pemetik tanggal beberapa pilihan dari daftar di atas.

<html>
<head>
<title>JQuery DatePicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$( "#txtDate" ).datepicker({
showOn: "button",
buttonImage: "datepicker_icon.png",
buttonText: "Date Picker",
buttonImageOnly: true});
});
</script>
</head>
<body>
<div>Select Date: <input type="text" id="txtDate" /></div>
</body>
</html>
Jika Anda tidak memiliki gambar seperti yang ditentukan di skrip di atas, maka nilai opsi buttonText akan ditampilkan ke browser.

Metode

Metode Datepicker digunakan untuk melakukan berbagai fungsi termasuk beberapa fungsi tanggal yang familiar, seperti tanggal getter dan setter. Beberapa fungsi ini,

  • getDate – Untuk mendapatkan tanggal sekarang.
  • setDate – Untuk mengatur tanggal yang ditentukan yang harus dalam format tanggal sekarang.
  • Sembunyikan – Untuk menghapus tampilan kalender yang baru dibuka.
  • option – Fungsi ini akan digunakan sebagai pilihan picker pemetik atau setter berdasarkan argumen yang diterimanya. Misalnya, jika tidak ada argumen saat meminta metode ini, ia akan mengembalikan semua pilihan pemilih yang ada sebagai kunci, pasangan nilai. Jika kita melewati nama opsi dan nilai untuk itu, maka nilainya akan ditetapkan untuk nama pilihan yang diberikan.

Terlepas dari daftar fungsi di atas, plugin ini juga mencakup beberapa fungsi utilitas untuk melakukan operasi seperti menghapus pengaturan pemilih tanggal default, tanggal pemformatan dan sebagainya.

Misalnya, fungsi setDefaults () digunakan untuk menghapus pengaturan default dengan menentukan opsi dan nilai yang diperlukan. Dan kodenya adalah,

<html>
<head>
<title>JQuery DatePicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$.datepicker.setDefaults({
showOn: "button",
buttonImage: "datepicker_icon.png",
buttonText: "Date Picker",
buttonImageOnly: true  
});
$(function() {
$( "#txtFromDate" ).datepicker();
});
</script>
</head>
<body>
<div>From Date: <input type="text" id="txtFromDate" />
</div>
</div>
</body>
</html>

Dengan menggunakan fungsi setDeafults () ini, kami dapat menerapkan opsi satu kali untuk semua datepicker yang tersedia di situs anda.

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.