1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Datepicker not working with latest Angular 2.4.0

GregLange pro asked 6 years ago

This was working when i was using an earlier version of MDB i believe it was in the 4.1.X with 2.1.X of Angular but now its not working. Below is my code that i am using in my index.html/component and there are no error being thrown in the console in Chrome. It also doesn't work in IE either the only thing i see is in WebStorm that there is a 404 on the get for bootstrap.css.map but i copied all files from the zip into the corresponding folder. index.html <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <!-- Tooltips --> <script type="text/javascript" src="js/tether.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <script> $('.datepicker').pickadate(); </script> admin.provider.component.html <div class="col-md-3 col-lg-3"> <div class="md-form"> <input placeholder="DOB" type="text" id="DOB-date-picker" class="form-control datepicker"> </div> </div>

Piotr Bender free answered 5 years ago

Hello,In response to your issue, I wanted to let you know about just released MDBootstrap Angular kit, that may be a sufficient solution to this or any other issues you have had with Angular integration so far.The kit can be found at the following link:https://mdbootstrap.com/angular/It contains all the components you could find in MDB jQuery version.We encourage you to try it out and report any bugs or issues at contact@mdbootstrap.com with [Angular] prefix or create a thread on this forum.Have a great day!

Kamil Paciepnik free answered 6 years ago

Hi kepner, currently we don’t support the angular. However, many users use Angular with MDB. In the future we plan to support Angular. Regards

kepner priority answered 6 years ago

@GregLange I use Angular 2 aswell and have the same problem when I try to use any javascript based component of MDB. The problem is that the DOM template of the Component is not ready when you call the datepicker in the Component and so jquery can't bind the events to the DOM element. Try to use a timeout in your component. 
import { Component}   from '@angular/core';
@Component ({
    template:<input placeholder="Selected date" type="text" id="birthday" class="form-control datepicker" value={{u.birthday}}>
})
export class MyComponent implements OnInit{
   constructor(){}
   ngOnInit(){
     setTimeout(function(){
        $('.datepicker').pickadate();
     },1)
   }
}
Note ` is missing before and after the template text. If one is not enough you can try to increase it to 10/100 etc..

GregLange pro answered 6 years ago

So tried moving the select to the main component and it still doesn't work. There are no errors in the console and if I try to use the "intellisense" in html in WebStorm it does not pull up mdb-select as an item. I have the select setup like your example and have moved the javascript around with no error raised but the select still not working. Am i missing a call somewhere? If you need to see what i have referenced in the index.html i will gladly put it here. Also the bootstrap you package in says bootstrap.css.map is missing when running Angular lite-server. Not sure if that really matters but wanted to let you know.

GregLange pro answered 6 years ago

I stand corrected it seems if everything is done in the a flat area so index it works...going to have to see why your tools don't like being nested into other objects. so it boils down to it doesn't like being an modal popup and if you put the html for it in the main page still in the popup it doesn't look correct as it makes it in such a small window. So there seems to be an issue when nesting it inside modals but not sure how to fix it.

GregLange pro answered 6 years ago

That's fine but the date picker is not working like it did prior to updating to the latest MDB and the mdb-select doesn't work either while we are talking about objects having issues.

Kamil Paciepnik free answered 6 years ago

Hi GregLange, we don’t provide direct support for the Angular. However, many of our users use the MDB with angular and they need to do it on their own. FAQ 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
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
GregLange
Pro User 10Support score
1Questions 4Answers 0Snippets