Angular datetimepicker issue

Question

I'm trying to create a multi step form with angular, that contains a datetimepicker, using ui.router and ui.angular.datetimepicker.

i've got the form all working and loading the picker ok, but I'm getting a strange error:

Uncaught TypeError: object is not a functionangular-animate.js:938 (anonymous function)
2angular.js:11607 TypeError: Cannot read property 'then' of undefined
    at Object.ngIfWatchAction [as fn] (angular.js:21974)
    at Scope.$get.Scope.$digest (angular.js:14243)
    at Scope.$get.Scope.$apply (angular.js:14506)
    at HTMLSpanElement.<anonymous> (angular.js:21443)
    at HTMLSpanElement.eventHandler (angular.js:3014)angular.js:11607 (anonymous function)angular.js:8557 $getangular.js:14261 $get.Scope.$digestangular.js:14506 $get.Scope.$applyangular.js:21443 (anonymous function)angular.js:3014 eventHandler

whenever I select the dates on the form. I'm a noob to angular and trying to work out what this is - I'm adding the angular-animate.js file from Google's hosted libraries so this is ok - can anyone help?

I have the following app:

angular.module('formApp', ['ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.bootstrap.datetimepicker' ])

// configuring our routes 
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

        // route to show our basic form (/form)
        .state('form', {
            url: '',
            templateUrl: 'views/home.html',
            controller: 'formController'
        })
        // nested states 
        // each of these sections will have their own view
        // url will be nested (/form/profile)
       .state('form.date', {
            url: '',
            templateUrl: 'views/form-date.html'
        })

        // url will be /form/interests
        .state('form.address', {
            url: '/',
            templateUrl: 'views/form-interests.html'
        })

        // url will be /form/payment
        .state('form.payment', {
            url: '/',
            templateUrl: 'views/form-payment.html'
        })

         // url will be /form/payment
        .state('form.appointments', {
            url: '/appointments',
        });

    // catch all route
    // send users to the form page 
    $urlRouterProvider.otherwise('/');
})

I have the following home.html:

<div id="form-container">

                    <div class="page-header text-center">


                        <!-- the links to our nested states using relative paths -->
                        <!-- add the active class if the state matches our ui-sref -->
                        <div id="status-buttons" class="text-center">
                            <a ui-sref-active="active" ui-sref=".date"><span>1</span> Date</a>
                            <a ui-sref-active="active" ui-sref=".address"><span>2</span> Address</a>
                            <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
                        </div>
                    </div>

                    <!-- use ng-submit to catch the form submission and use our Angular function -->
                    <form id="signup-form" ng-submit="processForm()">

                        <!-- our nested state views will be injected here -->

                        <div id="form-views" ui-view></div>
                    </form>

                </div>

and then to inject the form-date.html:

<h3>When would you like a helper?</h3>
<datetimepicker data-ng-model="formData.date"
    data-datetimepicker-config="{ startView:'day', minView:'hour' }" />

<div> You've selected: {{formData.date}}</div>

<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
    <a ui-sref="form.payment" class="btn btn-block btn-info">
    Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
    </a>
</div>

I'm using a custom CSS for the animation styling styling:

/* ANIMATION STYLINGS
============================================================================= */
#signup-form            { position:relative; min-height:300px; overflow:hidden; padding:30px; }
#form-views             { width:auto; }

/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter,
#form-views.ng-leave      { position:absolute; left:30px; right:30px;
    transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; 
}

/* enter animation */
#form-views.ng-enter            { 
    -webkit-animation:slideInRight 0.5s both ease;
    -moz-animation:slideInRight 0.5s both ease;
    animation:slideInRight 0.5s both ease; 
}

/* leave animation */
#form-views.ng-leave            { 
    -webkit-animation:slideOutLeft 0.5s both ease;
    -moz-animation:slideOutLeft 0.5s both ease;
    animation:slideOutLeft 0.5s both ease;   
}

/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
    to      { transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {  
    to      { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
    to      { -webkit-transform: translateX(-200%); }
}

/* slide in from the right */
@keyframes slideInRight {
    from    { transform:translateX(200%); }
    to      { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
    from    { -moz-transform:translateX(200%); }
    to      { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
    from    { -webkit-transform:translateX(200%); }
    to      { -webkit-transform: translateX(0); }
}

EDIT - Controller:

angular.module('formApp')
.controller('formController', ['$scope', function($scope) {

    $scope.beforeRender = function ($view, $dates, $leftDate, $upDate, $rightDate) {
    var index = Math.floor(Math.random() * $dates.length);
    $dates[index].selectable = false;
}

    // we will store all of our form data in this object
    $scope.formData = {};
    $scope.formData.date = "";
    $scope.opened        = false;

    $scope.time1 = new Date();
    $scope.showMeridian = true;
    //Datepicker
    $scope.dateOptions = {
        'year-format': "'yy'",
        'show-weeks' : false, 
        'show-time':true
    };

    // function to process the form
    $scope.processForm = function() {
        alert('awesome!');
        var appointment = new Appointment();
        console.log(appointment);
    };
}]);

The services come from the following plugin:

https://github.com/dalelotts/angular-bootstrap-datetimepicker

so would suspect it's not in there - but as I'm a noob i'm a little lost :-/

The relevant code here would be the controller and/or services/factories used to generate the variable bound to that date picker. — Claies
– Claies, Commented Mar 15, 2015 at 21:39
Which version of angular, and which version of angular-animate? — Claies
– Claies, Commented Mar 15, 2015 at 21:51
There is the problem. Angular-Animate and Angular must remain in sync. You must use the same version for both libraries. — Claies
– Claies, Commented Mar 15, 2015 at 21:55

dakab · Accepted Answer · 2015-08-22 21:31:16Z

1

I found this to cause the issue:

You may be having the options setup in date picker. ie:

datepicker-options="dateOptions"

Now, try adding the options to your controller. ie:

$scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
};

If it helps - my HTML looked like this:

<p class="input-group">
    <input type="text" class="form-control" datepicker-popup="dd/MM/yyyy" ng-model="dt" is-open="status.opened"
           min-date="minDate" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

edited Aug 22, 2015 at 21:31

dakab

5,97510 gold badges46 silver badges71 bronze badges

answered Aug 22, 2015 at 20:43

MaduKan

89612 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Claies · Accepted Answer · 2015-03-15 22:00:14Z

0

Angular-Animate is a core library, and it's functionality is directly based on the core Angular library. It is critical that these libraries remain in sync. You must use the identical version for both libraries.

answered Mar 15, 2015 at 22:00

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Collectives™ on Stack Overflow

Angular datetimepicker issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related