Question

我正在创建一个角度指令来处理一些日期时间功能。我正在尝试使用Angular的UI Bootstrap但是我在使用TimePicker时出现了一个奇怪的错误。它会显示我的开始时间（只是默认为当前时间）但是如果我尝试单击向上/向下箭头来更改时间，它会在两个字段中显示NaN，当我检查日期时，它表示它是无效的日期。以下是我的代码：

utilisyncApp.directive("questionDateTime", [
    "$log",
    function ($log) {
        return {
            restrict: "E",
            templateUrl: "/app/directives/utilisyncItem/utilisyncQuestion/questionDateTime/questionDateTime.html",
            scope: {
                item: '='
            },
            link: function ($scope, $element, $attrs) {
                $scope.mStep = 1;
                $scope.hStep = 1;
                $scope.dateFormat = 'dd-MMM-yyyy'
                $scope.popup = { isOpen: false };
                $scope.dateTime = { time: new Date() };

                $scope.openDate = openDate;
                $scope.changed = changed;


                init();

                function init() {
                    if ($scope.item.question.defaultToCurrent) {
                        $scope.dateTime.date = new Date();
                    }
                }

                function openDate() {
                    $scope.popup.isOpen = true;
                }

                function changed() {
                    var date = $scope.dateTime.date;
                    var time = $scope.dateTime.time;
                    if ($scope.item.question.includeTime) {
                        $scope.item.value = new Date(date.getFullYear(), date.getMonth(), date.getDay(), time.getHours(), time.getMinutes(), 0);
                    }
                    else {
                        $scope.item.value = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0);
                    }
                }
            }
        };
    }
]);

<div class="form-group">
    <p class="input-group">
        <input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="dateTime.date" ng-change="changed()" is-open="popup.isOpen" datepicker-options="dateOptions" close-text="Close" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="openDate()"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>
    <uib-timepicker ng-if="item.question.includeTime" ng-model="dateTime.date" readonly-input="true" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="true"></uib-timepicker>
</div>

好像我正在使用它几乎就像他们网站上的例子一样，但是它工作不正常而且我不确定原因。

Answer 1

这一行有一个错字：

<uib-timepicker ng-if="item.question.includeTime" ng-model="dateTime.date" readonly-input="true" ng-change="changed()" hour-step="hStep" minute-step="mStep" show-meridian="true"></uib-timepicker>

正如你写的那样

hour-step =“hstep”minute-step =“mstep”

而不是

hour-step =“ hStep ”min-step =“ mStep ”

Angular UI TimePicker无法正常工作

1 个答案: