Date Picker

Introduction

We used daterangepicker a JavaScript component for choosing date ranges, dates and times.

How to Setup

HTML Structure

<input class="form-control" type="text" name="daterange" value="01/01/2018 - 01/15/2018" />

Dependency

CSS

<!-- Daterangepicker CSS -->
<link href="vendors/daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />

JS

<!-- Daterangepicker JavaScript -->
<script src="vendors/moment/min/moment.min.js"></script>
<script src="vendors/c/daterangepicker.js"></script>
<script src="dist/js/daterangepicker-data.js"></script>

Initialize daterangepicker JS

/* Date range with a callback*/
$('input[name="daterange"]').daterangepicker({
	opens: 'left',
	"cancelClass": "btn-secondary",
}, function(start, end, label) {
	console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});