Date picker not rendering properly

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

shuailiu.usa pro asked 7 years ago

I bought angular pro version 4.3.1 and installed it in our project but the date picker doesn't work, I first checked the css file and it is imported correctly and then I checked the raw html it isn't same with your showcase here : https://mdbootstrap.com/angular/advanced/datepicker/, for example showcase has html element  'div.picker__nav--prev' but in my downloaded code the corresponding html element is  'button.picker__nav--prev' which display ugly on UI, how could this happen?  could you guys figure it out. thanks.  

Łukasz Salamon pro answered 7 years ago

I've got similar situation. I've pasted 'basic example' code from date picker page into application provided with 4.3.1 version. The datepicker shows but as shuailiu.usa said it displays ugly buttons and renders in a wrong way when month has 31 days.   What should I do to have datepicker display in the same way as in the example.

Edyta Dabrowska answered 7 years ago

Hello, Did you move all files to your project (typescript, fonts, scss and img folders)? Could you provide me your code? I'd like to reproduce your error. By the way, the code on the site is just an example and is not to be compared with angular code.

Łukasz Salamon pro commented 7 years ago

Well I've used your example application - the one that I've downloaded from profile page. Not sure what other files I could move there ? I've just added code from datepicker example page to app.component.

Edyta Dabrowska answered 7 years ago

@Łukasz Salomon Have you tried and pasted this one: public myDatePickerOptions: IMyOptions = { dayLabels: {su: 'Son', mo: 'Mon', tu: 'Die', we: 'Mit', th: 'Don', fr: 'Fre', sa: 'Sam'}, dayLabelsFull: {su: "Sonntag", mo: "Montag", tu: "Dienstag", we: "Mittwoch", th: "Donnerstag", fr: "Freitag", sa: "Samstag"}, monthLabels: { 1: 'Jan', 2: 'Feb', 3: 'Mär', 4: 'Apr', 5: 'Mai', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Okt', 11: 'Nov', 12: 'Dez' }, monthLabelsFull: { 1: "Januar", 2: "Februar", 3: "März", 4: "April", 5: "Mai", 6: "Juni", 7: "Juli", 8: "August", 9: "September", 10: "Oktober", 11: "November", 12: "Dezember" } };

Łukasz Salamon pro answered 7 years ago

Hi,

I did try that along with other settings but that only changes labels to German.

The dropdowns for month and year are always there.

I can see option 'editableMonthAndYear' but that doesn't change anything. Actually I've tried changing multiple options non have any effect on the controll :

disableHeaderButtons: true/false,
editableMonthAndYear: true/false,
inline: true/false,
showInputField: true/false

I've inspected example page and I can see that the same dropdowns are in DOM but are hidden - by the css element :

select {

  1. font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  2. display: none!important;

}
When shown they render in the same way.

Link to picture : https://c1.staticflickr.com/5/4345/36911431842_35a7355312_b.jpg

To sum up about dropdowns:

I think they are usefull but would be nice if they were styled lake the rest of the control (not browser default) and if there was a way to hide them through options.

Łukasz Salamon pro answered 7 years ago

I think I found more pressing issue with rendering. For small screens (mobile) date picker renders partially with scrollbars disabled. Link to picture: https://c1.staticflickr.com/5/4394/37081802485_c10c6f8cb0_b.jpg

shuailiu.usa pro answered 7 years ago

I got another issue to render October see screenshot here https://photos.app.goo.gl/p45hGDcWEWOaQYzC3 , the three buttons on bottom passed the div boundary.

 

Łukasz Salamon pro commented 7 years ago

yes I've got the same

Edyta Dabrowska answered 7 years ago

Thank you for noticing this! We will think about fixing this in the future. Also, the example page shouldn't be exactly compared to angular components.

Łukasz Salamon pro commented 7 years ago

hmm if we shouldn't compare example page to angular components then maybe example application should actually use all components to showcase their use. In that way you would be able to test and pick up quite easily on issues like that. And more important developers using MDB would have real live full examples of usage of the components not just example page which shouldn't be compared to components.

PlusOne commented 5 years ago

I bought this professional version and the fact this issue still exists 2 years later is not cool at all. I am spending my entire weekend modifying my app to work around this layout issue. We use professional 3rd party kits to save time, not to spend our weekend doing your work for you 2 years after an issue has been identified and you blow it off with platitudes.

Arkadiusz Idzikowski staff commented 5 years ago

Which version of MDB Angular do you use and what is the exact problem?

There were many issues mentioned in this topic and I'm not sure which one you are referring to.
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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
About author
shuailiu.usa
Pro User
14Support score
3Questions 3Answers
0Snippets likes 0Snippets