contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Menampilkan Datepicker di Modal Bootstrap

Posted in Tutorial Bootstrap Life at 08 April 2016 With 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

cara menampilkan detepticker di modal bootstrap

▼ Download Source Code Dibawah Ini ▼


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..

Artikel Terkait

Diskusi