Cara Menggunakan Bootstrap Date time picker

Bootstrap Datetime picker merupakan sebuah library/plugins javascript yang memudahkan pengguna dalam memasukan input tanggal/waktu menggunakan antar muka yang menarik. Tidak seperti Bootstrap datepicker yang hanya bisa menampilkan antar muka tanggal, bootstrap datetime picker lebih komplit karena bisa menampilkan antar muka tanggal, waktu/jam yang bisa pengguna pilih dengan mudah.

Baca juga : Input Tanggal Dengan Boostrap Datepicker

Untuk dapat menggunakan Bootstrap datetime picker Anda bisa mendowload librari bootstrap datetime picker dari halaman http://www.malot.fr/bootstrap-datetimepicker 

Lalu copy folder js dan css ke folder/direktori projek masing - masing. Konep penggunaaanya sama seperti bootstrap datepicker, dimana ada class yang dipanggil didalam input atau disini bisa dipanggil dalam div dan atau ditambahkan kedalam class input dengan parameter tambahan class="nama_class_js" data-date="" data-date-format="hh:ii" (untuk waktu)

Atau untuk lebih jelasnya bisa Anda lihat pada contoh script dibawah ini

<html>
<head>

</head>

<body>
<div class="container">

    <form action="" class="form-horizontal"  role="form">
        <fieldset>

            <div class="form-group">

                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>

                                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                                <input type="hidden" id="dtp_input1" value="" /><br/>
            </div>
                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>

                <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" value="" readonly>
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                                <input type="hidden" id="dtp_input2" value="" /><br/>

            </div>
                        <div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input class="form-control" size="16" type="text" value="" readonly>

                                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                                <input type="hidden" id="dtp_input3" value="" /><br/>
            </div>
        </fieldset>
    </form>
</div>

<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">
    $('.form_datetime').datetimepicker({

        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
        showMeridian: 1
    });
        $('.form_date').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
    });
        $('.form_time').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
                todayHighlight: 1,

           startView: 1,
                minView: 0,
                maxView: 1,
                forceParse: 0
    });
</script>