Menampilkan Datepicker di Modal Bootstrap

Publish Date : 08-04-2016 , dibaca 15154 kali, Hari ini dibaca : 1 kali ,0 comments

Pada postingan kali ini di kategori Tutorial Bootstrap yang pertama ini admin akan share Cara Menampilkan Datepicker di Modal Bootstrap , Admin sekarang sedang mendalami tentang Twitter Bootstrap, Yang Juga Sedang Mengembangkan aplikasi yang sedang dikerjakan,, Nah.. disitu,, ada problem masalah cara menampilkan datepicker / tanggal di modal Twitter Bootstrap,, Karna sudah terselesaikan nah.. Disini admin akan Share Tutorial nya

Ok.. Langsung kita coding... ;)

Cara Menampilkan Datepicker Di Modal Twitter Bootstrap,

Berikut code untuk menampilkan tanggal dengan bootstrap di modal:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Menampilkan Datepicker di Modal Bootstrap</title>
    <link rel=”stylesheet” href=”css/bootstrap.css”>
    <link rel=”stylesheet” href=”css/datepicker.css”>
    <script src=”js/bootstrap.js”></script>
    <script src=”js/jquery.js”></script>
    <style>
    .datepicker{z-index:1151;}
    </style>
    <script>
    $(function(){
    $(“#tanggal”).datepicker({
    format:’yyyy/dd/mm’
    });
    });
    </script>
    </head>
    <body>
    <div>
    <a href=”#myModal” role=”button” data-toggle=”modal”>Tampilkan Modal</a>

    <!– modal–>
    <div id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”>
    <div>
    <button type=”button” data-dismiss=”modal” aria-hidden=”true”>&times;</button>
    <h3>Belajar Datepicker</h3>
    </div>
    <div>
    <label>Tanggal</label>
    <input type=”text” id=”tanggal”>
    </div>
    </div>
    </div>

    <!–javascript here–>
    <script src=”js/bootstrap-modal.js”></script>
    <script src=”js/bootstrap-transition.js”></script>
    <script src=”js/bootstrap-datepicker.js”></script>
    </body>
    </html>

Silahkan Anda Jalankan di Browser anda,, jika anda mengalami masalah dimana posisi datepicker ada dibawah modal, untuk mengatasi hal demikian tinggal kita ubah patch css nya, tambahkan style seperti berikut :

<style>

.datepicker{z-index:1151;}

</style>

Untuk Source Code nya bisa di unduh disini

Nah.. Demikian artikel Cara menampilkan Tanggal Detepicker di Modal Bootstrap, Semoga dapat bermanfaat..

Membuat Modal Bootstrap
Next Post

Produk Rekomendasi

Ebook Membuat Website Dinamis PHP MYSQLi + Source Code

Ebook Membuat Website Dinamis PHP V.2 + Source Code

Sistem Informasi Pembuatan Akta Notaris online + Source Code

Tutorial Blog dan Website PHP MYSQLi

Contact Us

Statistik

Tags

Menampilkan Datepicker di Modal Bootstrap

Cara Menampilkan Datepicker Di Modal Twitter Bootstrap,

Produk Rekomendasi

Artikel Terkait

Diskusi

Youtube Tutorial

Random Posts