» » » » Input Tanggal Dengan Bootstrap datepicker

Input Tanggal Dengan Bootstrap datepicker

,,
Bootstrap datepicker merupakan sebuah JavaScript yang mampu memberikan antar muka berupa tanggal kepada pengguna saat mengisi data pada form input yang dideklarasikan khusus untuk memasukan data tanggal. Dulu ketika masih primitif Saya memasukan tanggal secara manual, namun bila menggunakan date picker, kita hanya cukup klik – klik saja interface kalender yang ditampilkan date picker bootstrap. Sebenarnya banyak jenis date picker untuk input tanggal, namun bila framework/gaya yang kita gunakan adalah bootstrap maka mungkin untuk input tanggalnya lebih cocok juga menggunakan bootstrap date picker, alasanya sederhana yaitu biar seragam saja.

Lihat juga :  

 Penggunaan Bootstrap Date Picker pada sebuah input data tanggal sangatlah sederhana, kita tinggal file css dan Javascript untuk Bootstrap Date Picker, kemudian membuat fungsi untuk mengaktifkan tanggal, maksudnya membuat fungsi untuk mengaktifkan tanggal yaitu misal ketika user taru kursornya pada input tanggal bootstrap date picker akan tampil. Contohnya seperti berikut

contoh tampilan boostrap date picker
Contoh tampilan bootstrap-datepicker. Saat input tanggal di klik, maka akan muncul tampilan kalender

Bootstrap Datepicker ini membutuhkan Javascript atau Jquery, nah bila Anda menggunakan Bootstrap maka tentunya sudah ada paket Jquery didalamnya, jadi hanya perlu memanggilnya. 

 Input Tanggal Dengan Bootstrap datepicker bisa menggunakan cara – cara berikut :
  1. Download terlebih dahulu Bootstrap Date Picker, kemudian taruh di folder server projek website Anda
  2. Panggil file CSS bootstrap dan Bootstrap date picker, taruh diatas kode </head>

    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../vendor/datepicker/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
  3. Buat input script input untuk tanggal lalu tambahkan pada CLASS ‘tanggal’ pada inputnya.
    Contoh
    <div class="form-group">
<label>Tanggal Lahir :</label>
<input type="text" name="tanggal_lahir" id="tanggal_lahir" class="tanggal form-control" required="" placeholder="Tanggal Lahir" />
</div>
  4. Panggil file Jquery Bootstrap dan Bootstrap datepicker, taruh dibagian atas </body>
    <!-- jQuery -->
    <script src="../vendor/jquery/jquery.min.js"></script>
 <!--Date Picke -->
 <script src="../vendor/datepicker/js/bootstrap-datepicker.js"></script>
  5. Supaya pada saat kursor diarahkan ke input tanggal muncul kalender date picker, maka buatlah fungsi untuk memanggil class tanggal yang sudah ditaruh pada input. Tambahkan JavaScript berikut diatas tag </body>
     <!-- Date Picker -->
   <script type="text/javascript">
            $(document).ready(function () {
                $('.tanggal').datepicker({
                    format: "yyyy-mm-dd",
                    autoclose:true
                });
            });
        </script>

Format tanggal diatas dibuat yyyy-mm-dd mengikuti format yang berlaku pada database, karena database secara default database untuk tanggal akan disimpan dengan format seperti itu, Anda bisa saja merubah inputnya sesuai dengan format tanggal indonesia dd-mm-yyyy, hanya saja nanti saat input di proses, maka script PHP perlu merubahnya terebih dahulu menjadi format tanggal yang sesuai dengan database yaitu yyyy-mm-dd, bila tidak maka data tanggal tidak akan tersimpan ke database, oleh karena itu pada date picker diatas mungkin lebih baik jika format tanggalnya disesuaikan saja dengan format tanggal database.

 Teknik input menggunakan boostrap date picker ini pernah Saya terapkan pada Aplikasi PPDB Sekolah Sepak Bola,  silahkan Anda tinggal mendownloadnya saja, supaya bisa memahami secara lebih jelas lagi.   

11 Responses to "Input Tanggal Dengan Bootstrap datepicker"

  1. Mang LembuMay 18, 2017 at 6:32 AM

    meskipun paketnya udah dilengkapi dengan ketersediaannya Javascript dan atau Jquery, tetap saja saya mah mati paham kalau urusan Bootstrap mah apalagi segala kudu masangin tanggal make Bootstrap Datepicker....lieur lah pokok na mah

    ReplyDelete
    Replies
    1. TRIKNEWSMay 18, 2017 at 4:42 PM

      masa blogger senior gini aja pahammati....

      Delete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin

Subscribe to:Post Comments (Atom)
mahjong ways mengungkap rahasia visual simbol dan mekanisme permainan yang unikmengenal perubahan simbol mahjong ways dan pengaruhnya terhadap alur permainanarsitektur microservices menjadi strategi baru dalam membangun infrastruktur aplikasi skala besarevolusi game mahjong dari permainan tradisional hingga hiburan digital modernfitur free spin dan scatter mahjong ways mengenal peran simbol dalam permainantransformasi teknologi cloud membentuk ekosistem layanan digital yang lebih fleksibelteknologi observability membantu platform modern menjaga stabilitas dan kinerja layanansistem cascading mahjong ways mengapa animasi dan transisi simbol menarik perhatianmengapa game bertema mahjong semakin populer ini faktor visual dan inovasinyamahjong ways dan perjalanan simbol tradisional menembus era digital ketika warisan permainan klasik menemukan identitas baru di kalangan generasi mudamahjong pgsoft dan fenomena psikologi visual yang membuat pemain terus memperhatikan perubahan simbol serta animasi dalam setiap putaranintegrasi teknologi automated monitoring memperkuat pengawasan infrastruktur digital melalui analisis real timemahjong ways 2 menghadirkan mekanisme near miss yang menarik dikaji dari sisi psikologi mengapa momen hampir mendapatkan kombinasi terasa begitu membekasmahjong pgsoft dan perhitungan expected value membuka perspektif berbeda tentang potensi hadiah besar serta realitas matematika di balik permainanmekanisme database terdistribusi mendukung konsistensi informasi pada lingkungan komputasi skala besarpgsoft vs pragmatic play mahjong ways dan princess starlight memperlihatkan dua pendekatan berbeda dalam mengembangkan desain visual serta mekanisme permainan digitalmahjong ways 2 dan rahasia di balik mekanisme cascade yang mengubah susunan simbol secara berurutan menjadi salah satu daya tarik gameplay modernteknologi gpu acceleration mengoptimalkan kinerja rendering grafis melalui pemrosesan komputasi paralelmahjong dan fenomena permainan lama yang menemukan tempat di era hiburan serbacepatmengapa cara pemain menyimpan ubin mahjong bisa mencerminkan tradisi yang berbedaketika mahjong menjadi bagian dari cerita migrasi dan pertukaran budaya asiaperubahan bentuk meja mahjong dari perlengkapan sederhana hingga desain otomatismahjong dalam sorotan bagaimana kesalahan kecil dapat mengubah jalannya permainandi balik koleksi mahjong antik terdapat kisah bahan dan teknik pembuatan ubinmengapa mahjong memiliki peran menarik dalam pertemuan komunitas perantauanmahjong dan cara pemain membangun kebiasaan mengamati ubin yang telah dibuangketika arsip foto keluarga merekam perjalanan tradisi bermain mahjongmenelusuri perkembangan mahjong melalui perubahan aturan kompetisi internasional