How to use MDB5 Datepicker in input-group?


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

oh6bg pro premium 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.)

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>


mlazaru staff answered 2 years ago

Hi!,

I've created snippet for you:

https://mdbootstrap.com/snippets/standard/mlazaru/4175341

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


oh6bg pro premium 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!


mlazaru staff commented 2 years ago

Yes, it might be a good idea!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • 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