Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Datepicker not working with latest Angular 2.4.0

Home Forums Material Design for Bootstrap Support Datepicker not working with latest Angular 2.4.0

This topic contains 6 replies, has 3 voices, and was last updated by  Kamil Paciepnik 1 month, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
Version: MDB 4.2.0 Pro
  • Author
    Posts
  • #13195

    GregLange
    Participant

    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>

    #13199

    Kamil Paciepnik
    Participant

    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

    #13209

    GregLange
    Participant

    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.

    #13210

    GregLange
    Participant

    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.

    • This reply was modified 1 month, 2 weeks ago by  GregLange.
    #13265

    GregLange
    Participant

    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.

    • This reply was modified 1 month, 2 weeks ago by  GregLange.
    #13286

    kepner
    Participant

    @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..

    • This reply was modified 1 month, 1 week ago by  kepner.
    • This reply was modified 1 month, 1 week ago by  kepner.
    • This reply was modified 1 month, 1 week ago by  kepner.
    • This reply was modified 1 month, 1 week ago by  kepner.
    #13304

    Kamil Paciepnik
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.