Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in

Datepicker not working with latest Angular 2.4.0

MDB SupportCategory: MDB AngularDatepicker not working with latest Angular 2.4.0
GregLange Pro User asked 9 months 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.


<!– 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>



<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”>

6 Answers
Kamil Paciepnik answered 9 months 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.


GregLange Pro User answered 9 months 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.

GregLange Pro User answered 9 months 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 User answered 9 months 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.

kepner Pro User answered 8 months ago

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{

Note ` is missing before and after the template text.

If one is not enough you can try to increase it to 10/100 etc..

Kamil Paciepnik answered 8 months 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.