Expected behavior I would like to create an input group of two INPUT fields in a form where the first input field has the start date and the second has the end date. In both fields I want to use the Datepicker.

Actual behavior The code below creates an input group and the Date icon is located right end of the second input field. When clicked on, and a date is selected, the date will be displayed in the first nput field, i.e. start date field.

What should I do to make both of the fields act as MDB Datepicker fields in an input group? Thanks!

Resources (screenshots, code snippets etc.)

HTML:

<div class="text-center mb-3">
<label>Start/End Dates</label>
<div
  class="input-group datepicker"
  data-mdb-format="yyyy-mm-dd"
>
  <input
    type="text"
    id="start_date"
    class="form-control form-control-sm"
  />

  <input
    type="text"
    id="end_date"
    class="form-control form-control-sm"
  />
</div>