gmoney12 February 2016

Angular UI TimePicker doesn't work correctly

I am creating an angular directive to handle some date time functionality. I am trying to use Angular's UI Bootstrap but I am getting a strange error with the TimePicker piece. It will show my starting time (just defaulting to the current time) but if I try and click the up/down arrows to change the time, it show NaN in both fields and when I inspect the date, it says it is an invalid date. The following is my code:

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

Answers


beaver February 2016

There is a typo in this line:

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

as you wrote

hour-step="hstep" minute-step="mstep"

instead of

hour-step="hStep" minute-step="mStep"

Post Status

Asked in February 2016
Viewed 2,879 times
Voted 5
Answered 1 times

Search




Leave an answer