Menggunakan datepicker dan bootstrap

Menggunakan datepicker dan bootstrap

6081
45
SHARE
bootstrap datepicker

Halo sahabat… pagi ini ada pertanyaan dari pengunjung harviacode tentang bagaimana menggunakan datepicker. Saya coba cari di harviacode dan ternyata saya belum membuat artikel tentang penggunaan datepicker dan bootstrap. Saya lihat di arsip komputer ternyata saya sudah membuatnya, tapi belum saya upload. Jadi sekarang kita simak yuk gimana caranya menggunakan datepikcer dan bootstrap.

Javascript bahasa client side.

Perlu kita pahami bahwa datepicker ini menggunakan javascript, dan kita tahu bahwa javascript adalah bahasa client side. Artinya, scope penggunaanya hanya pada view saja. Sebagai contoh jika Anda menggunakan framework Codeigniter, anda tidak perlu melakukan perubahan apa-apa pada controller dan model. Cukup di view saja.

Baik, agar lebih paham kita langsung praktekkan saja.

  1. Pertama kita perlu download bootstrap , bootstrap datepicker dan jquery.
  2. Lalu buatlah file index.php dengan kode sebagai berikut

Jalankan file index tersebut menggunakan browser, dan berikut ini adalah hasilnya jika tidak ada kesalahan.

bootstrap datepickerGimana, mudah kan.. selamat mencoba. Jika ada pertanyaan, jangan ragu menuliskannya di kolom komentar ya. Terima kasih telah berkunjung ke harviacode.com

45 COMMENTS

  1. untuk pengaturan controllernya bagaimana ya?
    ketika saya menggunakan format yyyy-mm-dd bisa masuk ke database dengan mudah, tapi dengan menggunakan format dd-mm-yyyy value tidak bisa masuk ke database, bagaimana solusinya ya min?

    • tinggal di ubah format aja mas sebelum disimpan ke database.. silahkan pelajari tentang explode atau substring. intinya tanggal di pecah2 dulu, kemudia disusun ulang menjadi format mysql..

    • wah.. berarti ada javascript yang konflik mas.. kalo menggunakan 2 jquery, coba salah satu jquerynya dulu mas. atau lihat consolenya dengan cara menekan f12 nanti akan kelihata errornya apa

    • jquerynya sudah ditambahkan mas? lalu selector $(‘#tanggal’) ini artinya input tersebut harus memiliki id=”tanggal”. pastikan input tanggalnya memiliki id yang sama dengan selectornya.

      Jika masih belum bisa, coba lihat error pada console browser, caranya tekan tombol f12 (jika anda menggunakan firefox), pilih pada bagian console, lalu refresh halaman.

  2. Jika filed tanggal ada 2 atau lebih dalam satu form bagaimana. Apakah fungsinya dibuat dibuat 2 juga?
    Dan untuk untuk nya bagaimana?Terima kasih

  3. Mas, jika field tanggal ada 2, misal tanggal_masuk,tanggal_keluar apakah function nya harus 2 juga.
    Dan bagaimana juga untuk update nya.
    Terima kasih

  4. mas kalo sudah bisa input pake datapicker, kalo buat update gimana ya mas di codeigniter.. misal coding nya ini ‘tgl_surat’ => set_value(‘tgl_surat’, $row->tgl_surat),
    ‘tgl_diterima’ => set_value(‘tgl_diterima’, $row->tgl_diterima),

    tapi masih tidak bisa muncul mas saat tampulan form update tglnya..
    thanks

    • untuk updatenya harus disesuaikan formatnya dulu mas. jadi ‘tgl_diterima’ => set_value(‘tgl_diterima’, tgl_indo($row->tgl_diterima)), *catatan : tgl_indo adalah fungsi php untuk mengubah format dari YYYY-MM-DD menjadi DD-MM-YYYY atay DD/MM/YYYY atau sesuai format di datepicker Anda mas.

  5. bang ketika coba diatas bisa namun ketika udah diterapkan di modal codeigniter gak jalan, udah diteliti beberapa kali terkait script yang dipanggil semuanya udah bener, kira-kira dimana salahnya?

    • coba di cek di consolenya, pesan errornya apa. caranya tekan f12, lalu tekan f5 di browser. lihat pesan error di consolenya apa ya.

  6. Master, saya dah coba klik tapi tak muncul datepicker. trus tekan f12 lht console ada kayak gini: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:1,
    ReferenceError: moment is not defined dashboard.js:35,
    Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery.min.js:2,
    Empty string passed to getElementById(). jquery.min.js:2. itu kenapa ya ?

    • kesalahan ada di javascriptnya ini mas. pertama pastikan sudah menambahkan jquery.js dan datepicker.js nya. kedua, periksa baris 25, disana ada .tanggal. pastikan sama dengan nama class yg ada pada input baris 15. ketiga, jika masih error, silahkan buka console browsernya, caranya pada mozilla tekan f12 lalu refresh halaman. lihat pesan errornya di tab console.

  7. gan kla misalnya ada 2 kalender but cek in sm cek out. biar tanggal cek out yang dimasukin ga boleh sama/ lebih dr tanggal cek in, gmana ya?

  8. kalau menambah tanggal jadi 90 hari kedepan gimana mas? saat kita pilih tanggal sesuai keinginan kita, maka tanggal akan otomatis bertambah 90 hari

LEAVE A REPLY