Skip to main content

Cara Menggunakan/ Integrasi/ Pasang Datepicker pada Bootstrap

Pada tulisan kali ini, saya akan membahas tentang Cara Menggunakan/ Integrasi/ Pasang Datepicker pada Bootstrap. Datepicker adalah plugin yang dapat memunculkan tanggal, bulan dan tahun yang nantinya dapat Anda pilih secara bebas di sebuah form.


Datepicker yang sederhana dapat Anda dapatkan di https://jqueryui.com/datepicker. Cara integrasi atau memasangnyapun cukup mudah dengan memperhatikan kodingan berikut ini:


Klik menu SEE ORIGINAL untuk lebih jelasnya

Penjelasan

  1. Kalau Anda perhatikan kodingan diatas, Anda perlu memanggil dulu file-file yang diperlukan, antara lain:
    • Jquery
    • Jquery UI (js + css)
  2. Kemudian, setelah kita memanggil file-file tersebut maka kita siapkan form yang akan dibuat menjadi form yang support dengan datepicker dan script js nya. 
  3. Pada baris ke 9-13 merupakan bagian untuk membuat fungsi javascript yang ditujukan ke form datepicker yang kita pilih.
  4. Pada baris ke 11 ada teks #datepicker yang artinya kita akan memasang datepicker pada form Date yang ada di baris ke-17 dengan id="datepicker". Sebagai catatan, kalau Anda ingin mengatur untuk ditampilkan dengan class, maka ganti simbol # menjadi . Jangan lupa juga id="datepicker" anda ubah menjadi class="datepicker".

Bagaimana Kalau Menggunakannya dengan Bootstrap?

Pada bagian ini, saya menjelaskan cara mengintegrasikannya dengan bootstrap pada 2 field input yang berbeda yaitu tgl_awal dan tgl_akhir yang caranyapun tidak terlalu sulit. Tutorial Premium saya yang berjudul Membuat Website Ecommerce Professional dengan Codeigniter 3, Bootstrap 4, PHP 7, IonAuth 2 dan API Rajaongkir juga telah disediakan fitur ini. Anda perlu menyiapkan beberapa file seperti pada bagian Datepicker tanpa bootstrap di awal tulisan ini.
  1. Download dulu filenya di
    https://github.com/uxsolutions/bootstrap-datepicker/tree/1.6 atau langsung klik disini. Dokumentasinya bisa Anda lihat disini
  2. Download jquery, klik disini
  3. Download bootstrap, klik disini
  4. Ekstrak file yang telah Anda download diatas ke direktori project Anda
  5. Buatlah kodingan seperti berikut ini:

    Klik menu SEE ORIGINAL untuk lebih jelasnya
  6. Jalankan dan lihat hasil yang telah Anda buat atau Anda bisa mendownload hasil jadinya yang versi bootstrap di bagian Download dibawah ini.

Download

Source code: klik disini

Silahkan ajukan pertanyaan di kolom komentar kalau ada yang ingin ditanyakan, jangan lupa dibagikan tulisan ini dan semoga bermanfaat
Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Fungsi base_url pada Native PHP

Halo semua, kali ini saya akan memberikan tutorial tentang Cara Membuat Fungsi base_url pada Native PHP, fungsi ini dapat ditemui pada salah satu framework yang ada, yaitu Codeigniter. Fungsi base_url yang akan kita buat ini merupakan fungsi untuk mendapatkan link atau url dasar suatu project atau website. Apabila belum mengerti, maka bisa kita lihat pada contoh berikut: <?php echo $base_url; // akan menghasilkan: http://localhost/namaprojectanda atau http://www.google.com ?> Selanjutnya kita masuk ke kodingan fungsi ini, cukup salin dan simpan script berikut: Jadi, ketika Anda ingin menggunakan fungsi ini cukup panggil/ include kan pada bagian yang akan ditampilkan. Misalkan Anda sedang membuka file produk.php, kemudian Anda ingin mendapatkan base_url dari produk yang akan ditampilkan maka cukup panggil nama fungsi diatas dan gabungkan dengan script yang telah Anda buat. Saya pribadi merasakan manfaat yang sangat besar dari fungsi ini pada native php, terutam...
Post a Comment
Read more

Membuat Tombol Kembali ke Halaman Sebelumnya dengan HTML dan Javascript

Pada coretan kali ini, saya akan memberikan tips sederhana tentang cara Membuat Tombol Kembali ke Halaman Sebelumnya dengan HTML dan Javascript. Bagi Anda yang membuat suatu aplikasi yang berhubungan dengan HTML dan Javascript mungkin tutorial kali ini akan bermanfaat. Bagaimana Caranya? Tanpa basa-basi panjang lebar, langsung saja copas script berikut ini dan silahkan dicoba. Berikut kodenya: Semoga bermanfaat
Post a Comment
Read more

Mengatasi Font Numbering yang Tidak Berubah Sesuai yang Diinginkan pada WPS Writer Linux

Pada artikel kali ini, saya akan membagikan cara Mengatasi Font Numbering yang Tidak Berubah Sesuai yang Diinginkan pada WPS Office Linux. Problem ini saya dapatkan ketika menggunakan WPS Office pada OS Linux Mint 18.3, kemungkinan di versi lain juga akan mengalami hal yang sama tapi untuk pastinya silahkan dicoba sendiri. Ketika saya ingin mengganti font numbering pada WPS Office Writer, hasilnya tidak sesuai dengan yang saya inginkan. Setelah mondar-mandir dengan mbah gugel dan forum Ubuntu Linux Indonesia , akhirnya ada solusi dengan cara: Silahkan download filenya di github  Ekstrak file yang sudah di download tadi Kemudian buka terminal Anda Masuk ke direktori folder yang sudah di ekstrak tadi, biasanya ada di folder Downloads Isikan pada terminal: cd Downloads, kemudian tekan enter Isikan lagi pada terminal cd namafolder yang sudah Anda ekstrak tadi Terakhir isikan perintah: sudo ./install.sh  Setelah mengikuti tahap-tahap diatas, silahkan coba buka W...
Post a Comment
Read more