1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Date picker

stalis pro asked 6 years ago

Hi support, I am using Angular MDB Pro. I have a few questions related to the Date Picker control can you help me to fix it, please? 1. I have found that the tab control is shown over the calendar control. 2. I have set the date picker width to 100% but still not fill the screen spaces horizontally. 3. The date picker control seems to have extra spaces in bottom margin. It showed a big gap when I have a date picker aligned vertically with another text input box. 4. The guide from https://mdbootstrap.com/angular/advanced/datepicker/ mentioned that the label:string property is available, but it does not seem to work. Many thanks

Rafał Rogulski free answered 6 years ago

Hi, I can't reproduce your problem on my test pack. Check with help of google chrome dev tools if any other HTML element is not above date picker arrow. Regards

stalis pro answered 6 years ago

No, I did not. I thought once I set the editableDataField to true, the control will allow me to input date.

Rafał Rogulski free answered 6 years ago

Hi, editableDataField can't be set to true because of a click event on input open data picker. Did you modify style or typescripts file of time picker? Regards

stalis pro answered 6 years ago

Hi, I had a date picker in a form. When I click on the left or right arrow in the calendar control, it automatically submits the form. Also, I have tried setting the editableDateField option to true, but it does not allow me to edit the date value in the input box.

Rafał Rogulski free answered 6 years ago

Hi, Can you send me your project on my mail: r.rogulski@mdbootstrap.com, (without node_modules), because I can reproduce this bugs? label support we will add in next releases. Regards

stalis pro answered 6 years ago

The below screenshot shown that the calendar control is shown behind the tab control: Date picker overlap with tab After added the provided CSS, the date picker still not shown 100% width and the bottom margin or padding still remain the same. Datepicker width I have added placeholder in the datepicker, can you tell how I can include a label too like the timepicker which support [label]. Also, one more thing I have found is if you mouse over the tab content, the mouse cursor is shown the same as you mouse cursor over the tab.

Rafał Rogulski free answered 6 years ago

Hi, 1. Can you tell me which one tab type do you use, and send some img if you can? 2. You must add the following style to yours: .picker__frame { width: 100%; max-width: 100%; } 3. Try this .mydp { label { margin-bottom: 0; width: 100%; } } 4. This is a mistake in a guide, sorry for that, we will fix it. If you want to change text in input you must use [placeholder]="'Your text'" Regards
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
stalis
Pro User 12Support score
8Questions 16Answers 0Snippets