Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : [email protected]. Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

JQuery Tips and Trick

Cara Mudah Membuat Form Datepicker dengan Bootstrap 4

img-responsive

Setelah sebelumnya saya share tutorial mengenai Cara Mudah Membuat Form Datepicker dengan Bootstrap 3, Pada tutorial ini kita masih membahas soal datepicker tapi kita akan menggunakan Bootstrap 4. Karena librari Datepicker pada tutorial Bootstrap 3 itu hanya bisa di pakai pada Bootstrap 2 dan Bootstrap 3 saja. Sama seperti tutorial sebelumnya, kita akan bahas cara buat inputan Tanggal (Datepicker), Periode Tanggal (DateRangePicker), Bulan (MonthPicker), Tahun (YearPicker) dan Periode Tahun (YearRangePicker).

Mungkin Anda penasaran seperti apa sih DatePicker, DateRangePicker, MonthPicker, YearPicker, YearRangePicker ini? gambar dibawah ini mungkin bisa memperjelas seperti apa bentuk form inputan yang akan kita buat sekarang.

Example - Cara Mudah Membuat Form Datepicker dengan Bootstrap 4


DEMO
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN
Berikut ini adalah hal-hal yang harus dipersiapkan :

  1. Download Librari Tempus Dominus Bootstrap Datepicker, klik link berikut : download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  2. Download jQuery, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  3. Download Bootstrap 4, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  4. Download Moment JS, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  5. Download Font Awesome, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  6. Buat sebuah folder baru dengan nama datepicker, lalu simpan pada folder xampp/htdocs/.
  7. Buat folder dengan nama css, lalu simpan pada folder xampp/htdocs/datepicker/.
  8. Buat folder dengan nama js,lalu simpan pada folder xampp/htdocs/datepicker/.
  9. Buat folder dengan nama libraries,lalu simpan pada folder xampp/htdocs/datepicker/.
  10. Ekstrak file tempusdominus-datepicker.7z yang telah di download tadi. Kemudian copy and paste folder tempusdominus-bootstrap-4 ke folder xampp/htdocs/datepicker/libraries/.
  11. Copy and paste file jquery.min.js yang telah di download tadi ke folder xampp/htdocs/datepicker/js/.
  12. Esktrak file bootstrap_v4.7z yang telah didownload tadi.
  13. Copy and paste semua file dari folder bootstrap_v4/css/ yang telah diekstrak tadi ke folder xampp/htdocs/datepicker/css/.
  14. Copy and paste file semua file dari folder bootstrap/js/ yang telah diekstrak tadi ke folder xampp/htdocs/datepicker/js/.
  15. Ekstrak file moment-js.7z yang telah di download tadi.Kemudian copy and paste folder moment ke folder xampp/htdocs/datepicker/libraries/.
  16. Ekstrak file fontawesome-5.7z yang telah di download tadi. Kemudian copy and paste folder fontawesome ke folder xampp/htdocs/datepicker/libraries/.

Cukup banyak librari yang dipakai ya? yup karena disini kita menggunakan Tempus Dominus Bootstrap Datepicker sehingga memang memerlukan librari lainnya yakni jQuery, Moment JS, Font Awesome 5 dan tentunya Bootstrap 4 nya.


STEP 2 – JAVASCRIPT
Di tahap ini kita akan buat sebuah file javascript dimana isinya adalah fungsi-fungsi datepicker yang akan digunakan nantinya. Buat sebuah file dengan nama custom.js, lalu simpan pada folder xampp/htdocs/datepicker/js/. Berikut ini kodenya :

function setDatePicker(){
  $(".datepicker").datetimepicker({
    format: "YYYY-MM-DD",
    useCurrent: false
  })
}

function setDateRangePicker(input1, input2){
  $(input1).datetimepicker({
    format: "YYYY-MM-DD",
    useCurrent: false
  })

  $(input1).on("change.datetimepicker", function (e) {
    $(input2).val("")
        $(input2).datetimepicker('minDate', e.date);
    })

  $(input2).datetimepicker({
    format: "YYYY-MM-DD",
    useCurrent: false
  })
}

function setMonthPicker(){
  $(".monthpicker").datetimepicker({
    format: "MM",
    useCurrent: false,
    viewMode: "months"
  })
}

function setYearPicker(){
  $(".yearpicker").datetimepicker({
    format: "YYYY",
    useCurrent: false,
    viewMode: "years"
  })
}

function setYearRangePicker(input1, input2){
  $(input1).datetimepicker({
    format: "YYYY",
    useCurrent: false,
    viewMode: "years"
  })

  $(input1).on("change.datetimepicker", function (e) {
    $(input2).val("")
        $(input2).datetimepicker('minDate', e.date);
    })

  $(input2).datetimepicker({
    format: "YYYY",
    useCurrent: false,
    viewMode: "years"
  })
}

 

Terlihat dari kode diatas kita membuat 5 fungsi yakni :

  1. setDatePicker() : berfungsi untuk menset textbox menjadi inputan Tanggal (DatePicker)
  2. setDateRangePicker() : berfungsi untuk menset textbox menjadi inputan Periode Tanggal (DateRangePicker)
  3. setMonthPicker() : berfungsi untuk menset textbox menjadi inputan Bulan (MonthPicker)
  4. setYearPicker() : berfungsi untuk menset textbox menjadi inputan Tahun (YearPicker)
  5. setYearRangePicker() : berfungsi untuk menset textbox menjadi inputan Periode Tahun (YearRangePicker)

Pada kode ini kita menggunakan beberapa option dari librari Bootstrap Datepicker antara lain :

  1. format
    Berfungsi untuk menentukan format tanggal.
    Format tanggal ini merupakan kombinasi dari :
    D : Tanggal dalam angka (tanpa awalan 0) : 1, 2, 3, 4, …., 10, 11.
    DD : Tanggal dalam angka (dengan awalan 0) : 01, 02, 03, 04, …., 10, 11.
    M : Bulan dalam angka (tanpa awalan 0) : 1, 2, 3, 4, …., 10, 11.
    MM : Bulan dalam angka (dengan awalan 0) : 01, 02, 03, 04, …., 10, 11.
    MMM : Bulan dalam huruf (Singkatan 3 huruf awal) : Jan, Feb, Apr, May.
    MMMM : Bulan dalam huruf (Lengkap) : January, February, April, May.
    YY : Tahun dalam angka (2 digit) : 11, 12, 13.
    YYYY : Tahun dalam angka (4 digit) : 2011, 2012, 2013.Untuk lebih jelasnya mengenai format apa saja yang bisa kita gunakan klik disini.
  2. useCurrent
    Jika diisi true, maka akan menset tanggal dan waktu sekarang sebagai default, jika false maka tidak akan diset.
  3. viewMode
    Berfungsi untuk menentuka view yang akan digunakan (days, months, years).

Untuk lebih jelasnya mengenai option-option yang bisa kita gunakan dari librari Tempus Dominus Bootstrap Datepicker ini, silahkan klik disini untuk melihat dokumentasinya langsung atau klik link dokumentasi pada bagian Sumber & Referensi dalam tutorial ini (Ada dipaling bawah tutorial ini).



STEP 2 – VIEW
Pada tahap ini kita akan buat sebuah file html untuk tampilannya. Buat sebuah file dengan nama index.html, lalu simpan pada folder xampp/htdocs/datepicker/. Berikut ini tampilan dan kodenya :

View - Cara Mudah Membuat Form Datepicker dengan Bootstrap 4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Bootstrap DatePicker</title>

    <!-- Include file bootstrap.min.css -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Include library Font Awesome -->
    <link href="libraries/fontawesome/css/all.min.css" rel="stylesheet">

    <!-- Include library Datepicker Gijgo -->
    <link href="libraries/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet">
</head>
<body>
    <div style="padding: 10px 30px;">
        <h1>DatePicker for Bootstrap 4</h1>
        <hr />

        <div class="row">
            <div class="col-2">
                <div class="form-group">
                    <label>Tanggal (DatePicker)</label>
                    <input type="text" class="form-control datepicker datetimepicker-input" data-toggle="datetimepicker" data-target=".datepicker" />
                </div>
            </div>
            <div class="col-2">
                <div class="form-group">
                    <label>Bulan (MonthPicker)</label>
                    <input type="text" class="form-control monthpicker datetimepicker-input" data-toggle="datetimepicker" data-target=".monthpicker" />
                </div>
            </div>
            <div class="col-2">
                <div class="form-group">
                    <label>Tahun (YearPicker)</label>
                    <input type="text" class="form-control yearpicker datetimepicker-input" data-toggle="datetimepicker" data-target=".yearpicker" />
                </div>
            </div>
            <div class="col-3">
                <div class="form-group">
                    <label>Periode Tahun (YearRangePicker)</label>

                    <div class="input-group">
                        <input type="text" class="form-control startyear datetimepicker-input" data-toggle="datetimepicker" data-target=".startyear" />
                        <div class="input-group-append">
                            <span class="input-group-text">s/d</span>
                        </div>
                        <input type="text" class="form-control endyear datetimepicker-input" data-toggle="datetimepicker" data-target=".endyear" />
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="form-group">
                    <label>Periode Tanggal (DateRangePicker)</label>

                    <div class="input-group">
                        <input type="text" class="form-control startdate datetimepicker-input" data-toggle="datetimepicker" data-target=".startdate" />
                        <div class="input-group-append">
                            <span class="input-group-text">s/d</span>
                        </div>
                        <input type="text" class="form-control enddate datetimepicker-input" data-toggle="datetimepicker" data-target=".enddate" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Include file jquery.min.js -->
    <script src="js/jquery.min.js"></script>

    <!-- Include file boootstrap.min.js -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Include library Moment JS -->
    <script src="libraries/moment/moment.min.js"></script>

    <!-- Include library Datepicker Gijgo -->
    <script src="libraries/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>

    <!-- Include file custom.js -->
    <script src="js/custom.js"></script>

    <script>
    $(document).ready(function(){
        setDatePicker()
        setDateRangePicker(".startdate", ".enddate")
        setMonthPicker()
        setYearPicker()
        setYearRangePicker(".startyear", ".endyear")
    })
    </script>
</body>
</html>

Ada 2 hal yang harus di perhatikan, karena disini kita menggunakan librari Tempus Dominus Bootstrap Datepicker, maka wajib menset atirbut class input nya dengan datetimepicker-input dan set atribut data-toggle dengan datetimepicker.

Saya akan coba jelaskan cara menggunakan 5 fungsi yang telah kita buat pada step sebelumnya (file custom.js).

  1. setDatePicker()

    Jika kita ingin menset sebuah textbox menjadi inputan Tangal (DatePicker), kita harus set atribut class, atribut data-toggle dan atribut data-target pada textbox tersebut : <input type=”text” class=”form-control datepicker datetimepicker-input” data-toggle=”datetimepicker” data-target=”.datepicker” />. Lalu tinggal kita panggil fungsi setDatePicker() yang ada di file custom.jsNote : sebaiknya fungsi setDatePicker() dipanggil di dalam fungsi $(document).ready(function(){.

    Kenapa textboxnya harus di set class datepicker dan data-target datepicker? karena pada file custom.js, pada fungsi setDatePicker(), saya menset “.datepicker” pada kode ini $(“.datepicker“).datepicker(. Nama class dan data-target ini tidak harus datepicker, penamaan class itu bebas gimana Anda sebagai developer mau memberi nama class apa. Yang pasti nama class di atribut textbox dan nama class di fungsi setDatePicker() nya harus sama (Yang saya beri warna merah pada penjelasan diatas).

  2. setDateRangePicker()

    Untuk menset 2 buah textbox menjadi inputan Periode Tanggal (DateRangePicker). Hal pertama adalah set atribut class pada kedua textbox tadi (harus berbeda). Dalam tutorial ini, textbox 1 saya set class dan data-targetnya : startdate (<input type=”text” class=”form-control startdate datetimepicker-input” data-toggle=”datetimepicker” data-target=”.startdate” />) dan textbox 2 saya set : enddate (<input type=”text” class=”form-control enddate datetimepicker-input” data-toggle=”datetimepicker” data-target=”.enddate” />).

    Kemudian kita panggil fungsi setDateRangePicker(param1, param2). Parameter 1 (param1) diisi dengan nama class textbox 1, Parameter 2 (param2) diisi dengan nama class textbox 2. Dalam tutorial ini pemanggilan nya jadi seperti ini : setDateRangePicker(“.startdate“, “.enddate“).

  3. setMonthPicker()

    Untuk menset textbox menjadi inputan Bulan (MonthPicker). seperti biasa pertama set atribut class dan data-target pada textbox tersebut dengan monthpicker (<input type=”text” class=”form-control monthpicker datetimepicker-input” data-toggle=”datetimepicker” data-target=”.monthpicker” />).

    Kemudian panggil fungsi setMonthPicker(). Dalam fungsi ini pun saya set class nya “monthpicker” ($(“.monthpicker“)). Jadi cukup panggil fungsi ini tanpa parameter tambahan.

  4. setYearPicker()

    Untuk menset textbox menjadi inputan Tahun (YearPicker). seperti biasa pertama set atribut class dan data-target pada textbox tersebut dengan monthpicker (<input type=”text” class=”form-control yearpicker datetimepicker-input” data-toggle=”datetimepicker” data-target=”.yearpicker” />).

    Kemudian panggil fungsi setYearPicker(). Dalam fungsi ini pun saya set class nya “monthpicker” ($(“.yearpicker“)). Jadi cukup panggil fungsi ini tanpa parameter tambahan.

  5. setYearRangePicker()

    Untuk menset 2 buah textbox menjadi inputan Periode Tahun (YearRangePicker). Hal pertama adalah set atribut class pada kedua textbox tadi (harus berbeda). Dalam tutorial ini, textbox 1 saya set class nya : startyear (<input type=”text” class=”form-control startyear datetimepicker-input” data-toggle=”datetimepicker” data-target=”.startyear” />) dan textbox 2 saya set : endyear (<input type=”text” class=”form-control endyear datetimepicker-input” data-toggle=”datetimepicker” data-target=”.endyear” />).

    Kemudian kita panggil fungsi setYearRangePicker(param1, param2). Parameter 1 (param1) diisi dengan nama class textbox 1, Parameter 2 (param2) diisi dengan nama class textbox 2. Dalam tutorial ini pemanggilan nya jadi seperti ini : setYearRangePicker(“.startyear“, “.endyear“).


Sekian untuk tutorial kali ini. Jika ada hal yang ingin ditanyakan, langsung tanyakan saja lewat kolom komentar dibawah ini. Jangan lupa LIKE dan SHARE nya hehe, Terimakasih.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
Dokumentasi Tempus Dominus Bootstrap Datepicker : https://tempusdominus.github.io/bootstrap-4
Dokumentasi Moment JS : https://momentjs.com/docs
Cara mudah menggunakan librari Tempus Dominus Bootstrap Datepicker, tutorial lengkap membuat form datepicker dengan librari Tempus Dominus Bootstrap Datepicker dan Bootstrap 4, tutorial step by step membuat form datepicker dengan librari Tempus Dominus Bootstrap Datepicker dan Bootstrap 4

Datepicker

(Total : 371 viewers, 22 viewers today)
form-datepicker-bootstrap-4

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

NOTE ARCHIVES