Date Range Picker

Date Range Picker allows users to select start and end dates as a range.

Usage

Date Range Picker is often used in calendar settings but can be employed on any web page where users need to select a date or range of dates. This component also can be customized to offer pre-set ranges, i.e., last 30 days, last 90 days, etc.

Example

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
	form { height: 500px; }
.reportrange input {
	padding: 10px;
	border-radius: 0 !important;
}

.inline {
	max-width: 400px;
	margin: auto;
}

.input-icons i {
	position: absolute;

}

.input-icons {
	width: 100%;
	margin-bottom: 10px;
}

.icon {
	padding: 10px;
	min-width: 40px;
}

.input-field {
	width: 100%;
	padding: 10px;
	text-align: center;
	margin-bottom: 3px;
}

.search-container {
	display: flex;
}

.prev,
.next {
	margin-right: -8px;
	margin-left: -18px;
}
</style>
<form class="inline">
	<div class="input-icons">
		<div class="search-container"><span style="margin-right:10px;"><input class="startDate input-field" name="datefilter" type="text" value="" /> </span> <span> <input class="endDate input-field" name="datefilter" type="text" value="" /> </span></div>
	</div>
</form>
<script type="text/javascript">
$(function() {

	$('input[name="datefilter"]').daterangepicker({
		autoUpdateInput: false,
		locale: {
			cancelLabel: 'Clear'
		}
	});

	$('input[name="datefilter"], .fa-calendar').on('apply.daterangepicker', function(ev, picker) {
		$('.startDate').val(picker.startDate.format('MM/DD/YYYY'));
		$('.endDate').val(picker.endDate.format('MM/DD/YYYY'));
	});

	$('input[name="datefilter"], .fa-calendar').on('cancel.daterangepicker', function(ev, picker) {
		$(this).val('');
	});

});
</script>