Topic: Date Range Control / Example
atomgregg
pro
asked 6 years ago
Hello,
Is there any way to configure the date picker to support range selection scenarios?
For example, when searching for say flights, or database records, a common requirement is to show records with a date value above, below or between 2x date input values.
Thanks,
Aaron
Add comment
Bartłomiej Malanowski
staff
answered 6 years ago
Hi, Aaron!
You can easily control your date picker. In the docs you can find a lot of options that might be helpful. I'll give you example:
1. Add two date pickers and give them unique ID like startdate and enddate:
<div class="md-form">
<input placeholder="Selected date" type="text" id="startdate" class="form-control datepicker">
<label for="date-picker-example">Start date</label>
</div>
<div class="md-form">
<input placeholder="Selected date" type="text" id="enddate" class="form-control datepicker">
<label for="date-picker-example">End date</label>
</div>
2. Add some javascript:
// initialize datepicker
$('.datepicker').pickadate();
// call the function when first datepicker was changed
$('#startdate').change(function() {
// get value from first datepicker and set it as minimum date in a second datepicker
var picker = $('#enddate').pickadate('picker');
picker.set('min', $('#startdate').val())
});
As you can see, in a second date picker you cannot select a date which is earlier than the date from first date picker. I hope this helps
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No