How to use Date Range Picker in Laravel

Include Date Range Picker package inside …

<script type=”text/javascript” src=”https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js”></script>

<link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css” />

Add Date Range Picker to any webpage element to pop up two calendars for selecting dates, times, or predefined ranges

<table class="table table-bordered">
<tr>
<td>Date Range</td>
<td><input type="text" name="rangepick" class="daterange" /></td>
</tr>
</table>

Add a Javascript to trigger Date Range Picker pop up when the input element is click

<script type=”text/javascript”>
$(function() {
$(‘input[name=”rangepick”]’).daterangepicker({
opens: ‘left’
})
});
</script>

Display the selected date range by storing the start and end date in a variable separately. Add the additional function in your Javascript

<script type=”text/javascript”>
$(function() {
$(‘input[name=”rangepick”]’).daterangepicker({
opens: ‘left’
}, function(start, end, label) {
pickstart = start.format(‘YYYY-MM-DD’);
pickend = end.format(‘YYYY-MM-DD’);
});
});
</script>

Add two input element in your page. This will be used to display separately the date range selected

<table class=”table table-bordered”>
<tr>
<td>From:</td>
<td>
<input type=”text” name=”startdate” id=”startdate” />
</td>
<td>To:</td>
<td>
<input type=”text” name=”enddate” id=”enddate” />
</td>
</tr>
</table>

Update the javascript to show the daterange variables to the input element

<script type=”text/javascript”>
$(function() {
$(‘input[name=”rangepick”]’).daterangepicker({
opens: ‘left’
}, function(start, end, label) {
pickstart = start.format(‘YYYY-MM-DD’);
pickend = end.format(‘YYYY-MM-DD’);

$(‘#startdate’).val(pickstart);
$(‘#enddate’).val(pickend);

});
});
</script>