Topic: How to use MDB5 Datepicker in input-group?

oh6bg priority asked 2 years ago

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.)


<div class="text-center mb-3">
<label>Start/End Dates</label>
  class="input-group datepicker"
    class="form-control form-control-sm"

    class="form-control form-control-sm"

Mateusz Lazaru staff answered 2 years ago


I've created snippet for you:

Let me know if this is what you were asking for.

oh6bg priority commented 2 years ago

Wow, thank you! It looks like I what I want, and a really elegant markup! Please add this example to the documentation, too!

Mateusz Lazaru staff commented 2 years ago

Yes, it might be a good idea!

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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.3.0
  • Device: Desktop
  • Browser: FF/Chrome/Edge
  • OS: Win10
  • Provided sample code: No
  • Provided link: No