Just Share Information and Experience

Monday 26 March 2018

Cara Membuat Input Tanggal Dengan Range Tertentu

egan-jy.blogspot.co.id

Artikel ini merupakan artikel lanjutan yang pernah saya tulis sebelumnya yang masih berkaitan dengan input tanggal. Jika sebelumnya saya membuat input tanggal hanya untuk satu tanggal, sedangkan postingan kali ini saya ingin memberikan tutorial cara membuat input tanggal dengan range tertentu. Artinya, nantinya user akan dapat memilih langsung rentang tanggal antara tanggal awal dan tanggal akhir.

Baca Juga : 

Untuk dapat membuat range tanggal, kita membutuhkan library tambahan yaitu "daterangepicker". Kegunaannya hampir sama dengan bootstrap datetimepicker yang saya gunakan pada artikel sebelumnya yaitu untuk memilih tanggal dengan tampilan kalender. Oleh karena itu, maka dalam tutorial ini kita juga butuh framework CSS yaitu bootstrap. Ok, mari kita  langsung saja mulai prakteknya.

Semua sumber program dalam artikel ini dapat kalian download pada akhir artikel ini.

Silahkan download file-file pendukung seperti bootstrap,jquery,moment.js dan daterangepicker. Namun jika kalian tidak mau ribet download satu-satu, filenya sudah tersedia pada link download di akhir artikel ini.

Selanjutnya, buat file HTML kemudian simpan dengan nama "index.html"
kemudian copy script berikut :



<html>
<head>
<!-- CSS untuk bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<!-- CSS untuk daterangepicker -->
<link rel="stylesheet" href="css/daterangepicker.css" type="text/css">  

<style type="text/css">
      .range-dtp { position: relative; }
      .range-dtp i {
        position: absolute; bottom: 10px; right: 10px; top: auto; cursor: pointer;
      }
      </style>

</head>
<body>
<br>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-sm-4">
<div class="range-dtp">
<label class="control-label"><small>Input Range Tanggal : </small></label>
<input type="text" id="range-tanggal" class="form-control" placeholder="dd/mm/yyyy - dd/mm/yyyy">
            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
</div>
</div>
</div>
</div>


</div>
</div>

<!-- js untuk jquery -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- js untuk bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- js untuk moment -->
<script src="js/moment.js"></script>
<!-- js untuk daterangepicker -->
<script src="js/daterangepicker.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.range-dtp i').click(function() {
          $(this).parent().find('input').click();
        });

$('#range-tanggal').daterangepicker({
autoUpdateInput: false,
format : 'DD/MM/YYYY',
useCurrent : false,
"showDropdowns": true,
    "autoApply": true,
}, function(start, end, label) {
$('#range-tanggal').val(start.format('DD/MM/YYYY')+" - "+end.format('DD/MM/YYYY'))
});

});
</script>
</body>
</html>


Silhkan Save, dan jalankan pada browser.. cukup simpel sekali sebenarnya. Namun jika kalian ingin mengetahui fitur-fitur lebih lanjut untuk penggunaan daterangepicker ini, kalian dapat membuka situs resminya di sini : Daterangepicker






No comments:

Post a Comment