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

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 class="md-form">
	<input placeholder="Selected date" type="text" id="enddate" class="form-control datepicker">
	<label for="date-picker-example">End date</label>
2. Add some javascript:
// initialize datepicker

// 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

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


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