Angular datetimepicker问题

时间:2015-03-15 20:31:09

标签: angularjs node.js twitter-bootstrap datetimepicker

我尝试使用ui.router和ui.angular.datetimepicker创建包含datetimepicker的angular的多步骤表单。

我已经将表单全部工作并加载了选择器,但我收到了一个奇怪的错误:

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

每当我在表单上选择日期时。我有点角色并尝试弄清楚这是什么 - 我正在添加来自谷歌托管图书馆的angular-animate.js文件,所以这没关系 - 任何人都可以帮忙吗?

我有以下应用:

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('/');
})

我有以下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> 

然后注入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>

我使用自定义CSS进行动画样式设计:

/* 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); }
}

编辑 - 控制器:

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);
    };
}]);

服务来自以下插件:

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

所以会怀疑它不在那里 - 但是因为我是一个小伙伴,我有点失落: - /

2 个答案:

答案 0 :(得分:1)

我发现这导致了这个问题:

您可能在日期选择器中设置了选项。即:

datepicker-options="dateOptions"

现在,尝试将选项添加到控制器。即:

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

如果有帮助 - 我的HTML看起来像这样:

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

答案 1 :(得分:0)

Angular-Animate是一个核心库,它的功能直接基于核心Angular库。 严重这些库保持同步。您必须为两个库使用相同的版本。