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.

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"></head>

<body>
<div class="container">
            <legend>Test</legend>    <form action="" class="form-horizontal"  role="form">
        <fieldset>
                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>            <div class="form-group">
                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
			<div class="form-group">					<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>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>                <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/>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>            </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>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>					<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({
		autoclose: 1,        //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,
</html>		startView: 1,
		minView: 0,
		maxView: 1,
		forceParse: 0
    });
</script>

</body>

Output :

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Cara Menggunakan Bootstrap Date time picker

0 Response to "Cara Menggunakan Bootstrap Date time picker"

Post a Comment