Membuat Date Time Picker dengan Bootstrap

Seringkali dalam membuat program dengan PHP kita akan dituntut untuk menginputkan data seperti tanggal. Inputan-inputan dengan jenis tanggal semacam ini sebaiknya menggunakan utilitas seperti date time picker. Tujuannya tentu agar program menjadi lebih user friendly. Bukankah kita membuat program dengan tujuan untuk memudahkan. 

Untuk Utilitas Date Picker semacam ini sebenarnya banyak sekali yang dapat kita manfaatkan seperti JQuery Date Time Picker yang memiliki banyak sekali variasi anda dapat melihatnya sendiri di website resminya karena disini saya akan membahas bagaimana membuat Utilitas date time picker dengan Framework CSS Twitter Bootstrap.
Membuat Date Time Picker dengan Bootstrap
1. Sebelum Lebih Lanjut, Pastikan anda sudah paham bagaimana menggunakan Bootstrap. 

2. Kedua, Sebagai informasi disini saya menggunakan Bootstrap V3 untuk versi 2 silahkan disesuaikan sendiri.

3. Ketiga Silahkan Download Script Tambahan yang diperlukan disini (JQuery dan bootstrap-datetimepicker.css dan bootstrap-datetimepicker.js).

4. Berikutnya extrack lalu tambahkan kedalam folder projek anda. Berikut adalah contoh Script yang saya gunakan untuk membuat date picker dari bootstrap
<!DOCTYPE html>
<html>
<head>
    <title>Date Picker</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="./bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>

<body>

<br>
<div class="container">
    <form action="PDF.php" method="post">
 <legend>Date Time Picker Bootstrap</legend>
        <fieldset>
   <div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">Tanggal</label>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="10" type="text" name="dari">
     <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
    <input type="hidden" id="dtp_input2" 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" src="./js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="./js/locales/bootstrap-datetimepicker.id.js" charset="UTF-8"></script>
<script type="text/javascript">
 $('.form_date').datetimepicker({
        language:  'id',
        weekStart: 1,
        todayBtn:  1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  minView: 2,
  forceParse: 0
    });
</script>

</body>
</html>

Share this

Related Posts

Previous
Next Post »

6 comments

comments
Anonymous
13 October 2014 at 20:39 delete

makasih banget. keep posting good article. love it

Reply
avatar
20 November 2014 at 13:24 delete

file bootsrap.min.js nya tidak ada ya ? mohon di tambahkan di dalam zip nya...

terima kasih banyak atas tutorialnya ...

Reply
avatar
5 January 2016 at 13:31 delete

cara untuk mengatur letak tanggal nya itu gimana ya?

Reply
avatar
2 March 2016 at 16:39 delete

mas ketika saya bkin script ini di appserv 2.5.10 di laptop saya jalan secara mulus tetapi ketika saya pindahkan ke PC tidak bisa muncul datepicker nya padahal menggunakan appserv dengan versi yang sama, mohon bantuannya mas masih newbie ni. :D

Reply
avatar
Anonymous
14 September 2016 at 15:22 delete

Dropbox full traffic .. jadi gk ketemu actionnya pdf.php

Reply
avatar

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.