Date Range Picker
A JavaScript component for choosing date ranges, dates and times.
Official documentation
For more detailed information and examples, see the official documentation: Date Range Picker.
How to use?
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
<link rel="stylesheet" href="../assets/vendor/daterangepicker/daterangepicker.css">
Copy-paste the following <script>
near the end of your pages under JS
Implementing Plugins to enable it.
<script src="../assets/vendor/daterangepicker/moment.min.js"></script>
<script src="../assets/vendor/daterangepicker/daterangepicker.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of daterangepicker
$('.js-daterangepicker').daterangepicker();
});
</script>
Auto apply
Use data-auto-apply="true"
attribute.
<input type="text" class="form-control js-daterangepicker" data-auto-apply="true">
With time picker
<input type="text" class="form-control js-daterangepicker-times">
<script>
$(document).on('ready', function () {
$('.js-daterangepicker-times').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
</script>
Initially empty
<input type="text" class="form-control js-daterangepicker-clear" placeholder="Select dates">
<script>
$(document).on('ready', function () {
$('.js-daterangepicker-clear').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('.js-daterangepicker-clear').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('.js-daterangepicker-clear').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
</script>
Predefined with readonly
<button id="js-daterangepicker-predefined" class="btn btn-soft-primary">
<i class="nova-calendar mr-2"></i>
<span></span>
</button>
<script>
$(document).on('ready', function () {
function cb(start, end) {
$('#js-daterangepicker-predefined span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#js-daterangepicker-predefined').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
cb(start, end);
});
</script>
With append
<div class="input-group">
<input type="text" id="with-append-field" class="form-control js-daterangepicker">
<div class="input-group-append">
<label for="with-append-field" class="input-group-text">
<i class="nova-calendar"></i>
</label>
</div>
</div>
With Arrow
<div class="input-group input-group-merge" >
<input type="text" id="with-arrow-field" class="form-control form-control-append-icon js-daterangepicker" >
<div class="input-group-append-merge" onclick="$('#with-arrow-field').data('daterangepicker').toggle();" >
<i class="nova-angle-down" > </i >
</div >
</div >
Modal
<!-- Modal Toggle -->
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#exampleModal">
Open modal
</button>
<!-- End Modal Toggle -->
<!-- Date Range Picker Modal -->
<div class="modal fade" id="exampleModal" tabindex="1" role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- In Modal -->
<label>Select date</label>
<input type="text" class="form-control js-daterangepicker">
<!-- End In Modal -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Date Range Picker Modal -->
Sizing
<!-- Small -->
<input type="text" class="form-control form-control-sm js-daterangepicker">
<!-- End Small -->
<!-- Default -->
<input type="text" class="form-control js-daterangepicker">
<!-- End Default -->
<!-- Large -->
<input type="text" class="form-control form-control-lg js-daterangepicker">
<!-- End Large -->
Validation states
For more inforamation about form validation your can read on Validation page
Required field
<!-- Valid State -->
<div class="u-has-success">
<input type="text" class="form-control js-daterangepicker">
<input type="text" class="form-control js-daterangepicker">
<small class="text-success">Required field</small>
</div>
<!-- End Valid State -->
Required field
<!-- Invalid State -->
<div class="u-has-error">
<input type="text" class="form-control js-daterangepicker">
<small class="text-danger">Required field</small>
</div>
<!-- End Invalid State -->