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>

Post a Comment

6 Comments

  1. makasih banget. keep posting good article. love it

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

    terima kasih banyak atas tutorialnya ...

    ReplyDelete
  3. cara untuk mengatur letak tanggal nya itu gimana ya?

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

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

    ReplyDelete

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.