ng-model does not work when we use jQuery-Timepicker-Addon

[Sandeep]

I am trying to use this timepicker addon. It has both date and time in it. 

I am able to make view working. So I can see the dateTimepicker. I can select date and time and it is shown in input field. I got ng-model 'time'. So $scope.time should have the value shown in view. But binding is not working. It is set to undefined.

Has anyone else used this date and time addon. Is there any other addon with both date and time which works good with angular ??

https://github.com/trentrichardson/jQuery-Timepicker-Addon 

http://trentrichardson.com/examples/timepicker/

</script>

        $(function () {
            $("#datepicker").datetimepicker({
                separator: 'T',
                dateFormat: "yy-mm-dd",
                addSliderAccess: true,
                sliderAccessArgs: { touchonly: false }
            });
        });
    </script>

 <input type="text" id="datepicker" ng-model="time" placeholder="YYYY-MM-DDTHH:MM" />

[Peter Bacon Darwin]

Have a look at this to see what sort of thing you need to do to get a jquery add-on working with ng-model.

https://github.com/angular-ui/angular-ui/tree/master/modules/directives/date

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/YTMU1-0Suv4J.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Sandeep]

Hello,

This only looks like date selector only. I need the one which has both date and time selection capability. The one mentioned above has both date and time built in.

Thanks

Pete

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

[Peter Bacon Darwin]

Sure!  I wasn't suggesting you should use it.  Just that if you look at the code you can see how to hook up the jquery add-on to angular ng-model.

Pete

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/YYXG5sOHEPoJ.

To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

[Brent]

FWIW - I followed the instructions at
https://github.com/angular-ui/angular-ui/blob/2af5472f6d84a6135295fabf2324b4d5a2dcb240/modules/directives/date/README.md
and got 2 errors: No module 'ui.directives' and No module
'ui.directives.date'

I tried using angular-ui.js in my index.html instead of date.js and
got Error: element.datepicker is not a function (at angular-ui.js at
line 79 and 83)

Then I went into angular-ui.js and replaced instances of
element.datepicker with $("#datepicker").datepicker. At this point,
the calendar would pop up and I could select a date and have the date
field be populated. However, I could tell that the model wasn't being
updated.

Finally, I removed this from my input tag: ng-pattern="/^(\d{1,2})/
(\d{1,2})/(\d{4})$/" (I was using the regex before I tried
implementing the datepicker.)

At this point, with the regex gone, I got the model to update.

Sweet!

On May 3, 3:20 am, Peter Bacon Darwin <p...@bacondarwin.com> wrote:
> Sure!  I wasn't suggesting you should use it.  Just that if you look at the
> code you can see how to hook up the jquery add-on to angular ng-model.
> Pete
>

> On 3 May 2012 08:51, Sandeep <mandla1...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Hello,
>
> > This only looks like date selector only. I need the one which has both
> > date and time selection capability. The one mentioned above has both date
> > and time built in.
> > Thanks
>
> > On Thursday, 3 May 2012 16:42:14 UTC+10, Peter Bacon Darwin wrote:
>
> >> Have a look at this to see what sort of thing you need to do to get a
> >> jquery add-on working with ng-model.

> >>https://github.com/angular-ui/**angular-ui/tree/master/**
> >> modules/directives/date<https://github.com/angular-ui/angular-ui/tree/master/modules/directiv...>
> >> Pete

>
> >> On 3 May 2012 05:10, Sandeep <mandla1...@gmail.com> wrote:
>
> >>> I am trying to use this timepicker addon. It has both date and time in
> >>> it.
>
> >>> I am able to make view working. So I can see the dateTimepicker. I can
> >>> select date and time and it is shown in input field. I got ng-model 'time'.
> >>> So $scope.time should have the value shown in view. But binding is not
> >>> working. It is set to undefined.
>
> >>> Has anyone else used this date and time addon. Is there any other addon
> >>> with both date and time which works good with angular ??
>

> >>>https://github.com/**trentrichardson/jQuery-**Timepicker-Addon<https://github.com/trentrichardson/jQuery-Timepicker-Addon>
>
> >>>http://trentrichardson.com/**examples/timepicker/<http://trentrichardson.com/examples/timepicker/>
>
> >>> </script>
>
> >>>         $(function () {
> >>>             $("#datepicker").**datetimepicker({
> >>>                 separator: 'T'**,
> >>>                 dateFormat: "**yy-mm-dd",
> >>>                 **addSliderAccess: true,
> >>>                 **sliderAccessArgs: { touchonly:** false }
> >>>             });
> >>>         });
> >>>     </script>
>
> >>>  <input type="text" id="**datepicker" ng-model="time" pl**aceholder="YYYY-MM-DDTHH:MM" /**>

>
> >>>  --
> >>> You received this message because you are subscribed to the Google
> >>> Groups "AngularJS" group.

> >>> To view this discussion on the web visithttps://groups.google.com/d/**
> >>> msg/angular/-/YTMU1-0Suv4J<https://groups.google.com/d/msg/angular/-/YTMU1-0Suv4J>
> >>> .

> >>> To post to this group, send email to ang...@googlegroups.com.

> >>> To unsubscribe from this group, send email to angular+unsubscribe@**
> >>> googlegroups.com <angular%2Bunsu...@googlegroups.com>.
> >>> For more options, visit this group athttp://groups.google.com/**
> >>> group/angular?hl=en <http://groups.google.com/group/angular?hl=en>.