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 : 17,429 viewers, 6 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

20 Comments

  1. Dendy Juliano Juanda

    Bang klo DatePicker yang Periode Tahun bisa gak inputan yang pertama tanggal yang udah di lewati tanggal sekarang nya di disable

    • sangat bisa. tambahkan option : minDate: new Date() pada javascript datetimepickernya. kalau dalam tutorial ini pada custom.js nya

      • Dendy Juliano Juanda

        Bang Saya membuat yang Periode Tanggal nah saya ingin di inputan nya ada nilai defaultnya skrip nya gmna bang, trs nilai default untuk inputan kedua nilai default nya inputan pertama + 1 hari nah bisa gk bang

        • di php, untuk buat tanggal +1 hari. caranya : date('Y-m-d', strtotime('+1 day'). untuk ngasih nilai default datepickernya, set nya pakai jquery seperti ini :
          $(".startdate").val("2020-07-11")
          $(".enddate").val("2020-07-11")

  2. Edi Sandy

    ini error yang di console bang :
    Uncaught Error: datetimepicker component should be placed within a relative positioned container
    at k._place (tempusdominus-bootstrap-4.min.js:7)
    at k.show (tempusdominus-bootstrap-4.min.js:7)
    at k.r.toggle (tempusdominus-bootstrap-4.min.js:6)
    at Function.k._jQueryHandleThis (tempusdominus-bootstrap-4.min.js:7)
    at HTMLDivElement. (tempusdominus-bootstrap-4.min.js:7)
    at Function.each (jquery.min.js:2)
    at m.fn.init.each (jquery.min.js:2)
    at m.fn.init.k._jQueryInterface [as datetimepicker] (tempusdominus-bootstrap-4.min.js:7)
    at HTMLInputElement. (tempusdominus-bootstrap-4.min.js:7)
    at HTMLDocument.dispatch (jquery.min.js:4)

  3. Edi Sandy

    kok gabisa di ganti format tanggalnya ya mas ?
    padahal yg di file custom.js sudah saya ganti yg format YYYY-MM-DD menjadi DD-MM-YYYY
    Kira2 apalagi yang harus saya ganti mas ?

      • Edi Sandy

        sudah bang, sudah saya clear cache tapi tanggalnya masih tetep gini : 07/07/2020 9:11 AM
        padahal sudah saya ganti yg format menjadi DD-MM-YYYY

        • coba buka console browsernya om, cek apa ada error disitu?
          kalau tidak ada error juga, coba om pastikan tag inputnya sudah sesuai (cek penjelasan saya pada STEP 2 setelah coding di STEP 2, coba pastikan sudah sesuai penjelasan saya disitu)

          • Edi Sandy

            bang, ternyata di mozilla bisa di chrome yng gabisa bang, gitu kenapa ya bang ?

          • Edi Sandy

            ini script htmlnya :

            <input type="text" class="form-control datepicker datetimepicker" name="tgldoc" value="” title=”Klik textboxt untuk memilih tanggal” data-toggle=”datetimepicker” data-target=”.datepicker” />

  4. Maharani

    Kalau di blog nerapinnya kayak apa kakak yaa. maaf kak awam banget hehehe. ..

  5. Sugeng p

    Bisa konsultasi via AA bro…
    Mau tanya-tanya seputar PHP mysql

NOTE ARCHIVES