Menggunakan widget UI

1. Persiapkan Proyek Anda

Pastikan Anda telah menyertakan jQuery dalam proyek Anda. Anda dapat mengunduh jQuery dari situs resminya atau menggunakan CDN seperti berikut:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Sertakan jQuery UI

Anda juga perlu menyertakan jQuery UI. Anda dapat mengunduhnya dari situs resmi jQuery UI atau menggunakan CDN:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

3. Buat Widget

Misalnya, mari kita buat widget Datepicker yang memungkinkan pengguna untuk memilih tanggal:

<input type="text" id="datepicker">

4. Aktifkan Widget

Gunakan JavaScript untuk mengaktifkan widget Datepicker pada elemen input:

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

5. Kustomisasi Widget

Anda dapat menyesuaikan widget sesuai kebutuhan Anda. Misalnya, Anda dapat menambahkan opsi seperti ini:

<script>
  $(function() {
    $("#datepicker").datepicker({
      dateFormat: "dd/mm/yy",
      showButtonPanel: true
    });
  });
</script>

6. Hasil Akhir

Dengan langkah-langkah di atas, Anda telah membuat widget Datepicker yang dapat digunakan dalam proyek Anda. Anda dapat menyesuaikan opsi sesuai kebutuhan Anda.

Selamat mencoba menggunakan widget UI dengan jQuery!