Topic: Floating label for date picker
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.)
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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