Floating label for date picker


Topic: Floating label for date picker

sid223437 asked 5 years ago

Expected behavior I am not able to see floating label above date picker, neither I am not able to see in api docs. I tried adding label attribute but its behavior is weird. Is there any way I can add label to date picker?

Actual behavior

Resources (screenshots, code snippets etc.)


Aliaksandr Andrasiuk staff answered 5 years ago

Hi,

Unfortunately, there is no possibility to add label using Datepicker props.

But you can use the next workaround :

<div style={{ position: "relative" }}>
          <MDBDatePicker getValue={this.getPickerValue}  />
          <label className="black-text" style={{ fontSize: "11px" ,position: "absolute", top: "-15px", left: "0px" }}>Label</label>
</div>

As you can see Datepicker and Label will be rendered inside of div with position: relative(div's heigth will be set to height of datepicker) and you will be able to set position of label relatively on div position.

Hope I could help.

Best regards.


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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.16.0
  • Device: laptop
  • Browser: chrome
  • OS: Mac osx
  • Provided sample code: No
  • Provided link: No
Tags