datepickers

[Chris]

I have 2 datepickers that are dependent on each date to select a range.  I am using jquery but it does not seem to update my model.  Is this when I should use a directive? I am not really sure how it would be implemented for this.

Here is what I have:

http://jsfiddle.net/CHVbb/404/ 

Chris

[Johan]

Yes - a directive would be best so everything is inside the "angular world" but depending on your structure you could hook into $viewContentLoaded event to  init your jQuery.

$scope.$on('$viewContentLoaded', function(){

       console.log('view loaded - forms: ' + $('form').length);    // simple test to see if we can use jQuery on DOM = yes :)

}); 

[Peter Bacon Darwin]

Hi Chris. Please check out my date picker in the angular ui project.
https://github.com/angular-ui/angular-ui/tree/master/modules/directives/date

Pete
...from my mobile.

--
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/-/GpYPkHJtOYYJ.
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.

[Chris]

Hey Johan,

I tried to implement that and it still is not working for me:

http://jsfiddle.net/CHVbb/432/

I can't get the datepicker to work, as a directive or a viewContentLoaded method.  Can you see what I am missing?

Chris

[Johan]

Chris - to use the event you would need to use ng-view and routes.

Using directives is a better solution (modular, reusable), but for a quick solution I've used the event to run jQuery code once the DOM is ready.

[Peter Bacon Darwin]

Take a look at this.  I have built a date picker directive that uses the jQueryUI date picker.

http://jsfiddle.net/CHVbb/441/

You can see the code for the directive here: https://github.com/angular-ui/angular-ui/blob/master/modules/directives/date/src/date.coffee

You can still pass in any of the normal jQueryUI date picker options to the directive if you want control over how the picker looks and behaves.

Notice that wrapping a jQueryUI widget is not a trivial task especially if you want to work it into the standard angular form and model controllers.

Pete

Chris

--

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/-/oVtEUv_fDGgJ.

[Suller Andras]

On Wed, Apr 25, 2012 at 1:03 AM, Peter Bacon Darwin
<pe...@bacondarwin.com> wrote:
> Take a look at this.  I have built a date picker directive that uses the
> jQueryUI date picker.
> http://jsfiddle.net/CHVbb/441/
> You can see the code for the directive
> here: https://github.com/angular-ui/angular-ui/blob/master/modules/directives/date/src/date.coffee
> You can still pass in any of the normal jQueryUI date picker options to the
> directive if you want control over how the picker looks and behaves.
> Notice that wrapping a jQueryUI widget is not a trivial task especially if
> you want to work it into the standard angular form and model controllers.
> Pete

Thanks, Pete, but for me it returns the selected Date in local time
zone but print it in UTC. Is this how it should work? I'm not sure
what did I expect tho, but it seems weird :)

Hello, Superhero! Between 01/03/2012 and 04/25/2012
"2012-01-02T17:00:00.000Z"
"2012-04-24T17:00:00.000Z"

Andras

[Peter Bacon Darwin]

The model field to which it is bound gets a javascript Date object.  You can do what you like with that.  The date picker can be configured to display the date in any format you like.

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

[Peter Bacon Darwin]

See this fiddle for an example of what you can do.

http://jsfiddle.net/CHVbb/445/

[Edgardo Quiroz]

hi Pete,

I want to see the code for the directive but the link is broken, I was wondering if you has the correct link or a similar example

[Peter Bacon Darwin]

Here is a running demo: http://angular-ui.github.com/ui-date/

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

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

Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Michael Baker]

use the datepicker from angular-ui (follow the configuration in the docs it's simple) 

in the form define two date fields

            <input ng-model="dateIssued" ui-date="dateOptionsIssued" />

            <input ng-model="dateExpires" ui-date="dateOptionsExpires" />

 then in the controller 

        $scope.dateOptionsExpires = {

            changeYear: true,

            changeMonth: true,

            minDate: dateIssued

        };

        $scope.dateOptionsIssued = {

            changeYear: true,

            changeMonth: true

        };

        $scope.$watch('dateIssued', function (newVal, oldVal) {

            if (newVal !== oldVal) { // if not init phase

                $scope.dateOptionsExpires.minDate = newVal;

            }

        });

        $scope.$watch('dateExpires', function (newVal, oldVal) {

            if (newVal !== oldVal) { // if not init phase

                $scope.dateOptionsIssued.maxDate = newVal;

            }

        });

it's just as you do it in jquery-ui

Sorry couldn't get a plnkr or fiddle but angular-ui already handles all the directives.

[Peter Bacon Darwin]

The angular-ui version is now not supported use ui-date project instead.

--

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

[Edgardo Quiroz]

thanks Pete :)

[stowns3]

Hi Pete.  I have an issue when trying to use 2 datepicker-popups.  When I use 1 everything is fine but adding a second causes the 2nd input to open both.  It's my understanding that id's don't need to be provided so I'm not sure whats up.

    <div class="form-horizontal">

      <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="n.start" is-open="opened" min="minDate" date-disabled="disabled(date, mode)" ng-required="true" />

    </div>

    <div class="form-horizontal">

       <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="n.end" is-open="opened" min="minDate" date-disabled="disabled(date, mode)" ng-required="true" />

    </div>

screenshot: http://cl.ly/image/0J2X3F2s3t2X

using version 0.6.0  Thanks in advance!

[Rob Hensley]

Hey stowns3,

I believe it because you have the "opened" in both is-opens; when "opened" gets changed for one datepicker, it is changes for both. Something like this should work:

<div class="form-horizontal">

      <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="n.start" is-open="opened1" min="minDate" date-disabled="disabled(date, mode)" ng-required="true" />

    </div>

    <div class="form-horizontal">

       <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="n.end" is-open="opened2" min="minDate" date-disabled="disabled(date, mode)" ng-required="true" />

    </div>