Menambahkan Datepicker pada Tag Input

Datepicker membantu memasukkan tanggal dengan memilih dari kalender tanpa memasukkan secara manual di kolom inputan. Bila kaian ingin mengumpulkan tanggal dari pengunjung, menambahkan datepicker ke masukan yang diajukan dapat memberikan pengalaman pengunjung yang baik. Menggunakan plugin jQuery kalian dapat dengan mudah menambahkan datepicker ke kolom input. Ada banyak plugin datepicker yang tersedia, namun jQuery UI Datepicker adalah plugin yang sangat dapat dikonfigurasi lebih luas untuk menambahkan datepicker di halaman web.

Dalam tutorial ini, kami akan menunjukkan cara menambahkan datepicker dengan jQuery UI. Dengan menambahkan fungsi datepicker, kalender akan terbuka saat pengguna meng-klik kolom input. Pengguna dapat memilih tanggal (hari, bulan, dan tahun) dari kalender tersebut. Disini kita akan memberikan contoh kode dari beberapa fungsi datepicker yang banyak digunakan.

Berikut adalah library yang dibutuhkan

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

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

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 

Kode javascript dasar untuk mengaktifkan datepicker

$(function(){
    $("#datepicker").datepicker();
});

 

Dengan kode html seperti berikut

<p>Tanggal: <input type="text" id="datepicker"></p>

 

Pada plugin datepicker kita juga bias mengubah format tanggal. Secara default, format tanggal bawaan JQuery UI Datepicker adalah MM/DD/YYYY. Kita dapat mengubahnya dengan memberi property tambahan seperti berikut

$(function(){
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd"
    });
});

 

 

Kita juga bisa menonaktifkan atau mengaktifkan fungsi ganti bulan dan tahun pada datepicker, jadi dalam kondisi ini, pengguna hanya bisa memilih tanggal yang ada pada bulan saat ini.

$(function(){
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true
    });
});

 

 

 

Kita juga bisa menggunakan range datepicker, yang dimaksud range date picker adalah kita memilih tanggal awal dan tanggal akhir. Biasa digunakan untuk system book pada hotel atau penyewaan barang.

$( function() {
  var from = $( "#fromDate" )
      .datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true
      })
      .on( "change", function() {
        to.datepicker( "option", "minDate", getDate( this ) );
      }),
    to = $( "#toDate" ).datepicker({
      dateFormat: "yy-mm-dd",
      changeMonth: true
    })
    .on( "change", function() {
      from.datepicker( "option", "maxDate", getDate( this ) );
    });

  function getDate( element ) {
    var date;
    var dateFormat = "yy-mm-dd";
    try {
      date = $.datepicker.parseDate( dateFormat, element.value );
    } catch( error ) {
      date = null;
    }

    return date;
  }
});

 

 

Dengan banyak kemungkinan dari pengalaman pengguna bisa kalian kondisikan sendiri berbagai macam property dan fungsi dari datepicker tersebut. Demikian artikel tentang menambahkan datepicker pada kolom input. Semoga bermanfaat

14 November 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat