Angular js integration

[aaani]

I recently authored an angular js directive that uses pickadate.js under the hood. I am wondering if integration with angular js (a ng module and directive) is something this library can benefit with. I would be happy to refactor my code and push it.

[amsul]

I'd love to see these types of integrations!

However, I would suggest building them for v4 as v3 will soon be deprecated when v4 is released..

[marcus30]

@aaani Any progress with this?

[gilcrespo]

It would be very interesting :)

[jlt0022]

Yes please!

[aaani]

Since pickadate.js is a jQuery plugin, it will result in the angular module also depending on jQuery. Using jQuery with Angular isn't common (and sometimes discouraged). Do you guys think this will still be useful?

[amsul]

How are other jQuery plugins integrated into angular apps?

[marcus30]

@aaani, without a doubt. A "lite" version of jquery is built into angular. Not sure if it would support pickadate though.

https://docs.angularjs.org/api/ng/function/angular.element

[aaani]

@amsul, I was looking at how the 'chosen' jquery pluging was ported to Angular. jQuery: https://github.com/harvesthq/chosen Angular: https://github.com/localytics/angular-chosen Apparently the angular version has a jQuery dependency and is simply a directive/module wrapper which calls the jQuery plugin under the hood. I was thinking of doing the same.

[im-n1]

I just run into this issue,. beacause materializecss framework uses pickadate.js.

I came up with a solution, which is based on updating angular scope. When datepicker is closed it fetches name of model from datepicker input attribute ng-model and set current value (date, time) into angular scope under value of ng-model. So if u init your datepicker like this, it will be universal.

            picker = $(".datepicker").pickadate({
                format: "mm/dd/yyyy",
                onClose: function(val) {

                    var val = this.get();
                    var modelName = this.$node.attr("ng-model");
                    var scope = angular.element(this.$node).scope();

                    scope.$apply(function() {
                        scope[modelName] = val;
                    });
                }
            });

Hope it helps.

[weagle08]

I'm pretty new to web technologies and would like to use this datepicker in my angularjs app so I've started working on this issue, but if someone more familiar with jquery/angular would like to help here is a plunk: http://plnkr.co/edit/yeYxWy?p=info I'm making a directive since this is the preferred method in angular. You can see i have format and ngModel is bound (sort of) but I can't get other bindings working. Can anyone take a look?

[weagle08]

Ok, this plunker is working and you will have to add any attributes you need to it or just ask and I can help..

http://plnkr.co/edit/A0TynS?p=preview

[weagle08]

When 4.0 comes out i can do the directive wrapping for it if you would like it to have the available directive for angular in the lib, or i could create a pull request for 3.x release if desired.