How to use Date Range Picker in Laravel
Use Case Scenario:
In your Laravel project. use Date Range Picker in implementing a from – to date range functionality.
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>
