0

I am trying to implement a simple datepicker using the akveo AngularJS project.

When I change my date,I am setting a $scope variable from on-change function. When I debug, I can see that the correct picked value is being passed and $scope.simStartDate is actually changing to the set date.

However, when I try to read it later, in ParamsFormBtnClicked() function, the has reset back to its original value. It looks like I am changing a value in a different scope, but I cannot figure out where.

This is the JS file:

    angular.module('BlurAdmin.pages.dashboard')
        .controller('DashboardParamsFormCtrl', DashboardParamsFormCtrl);

    /** @ngInject */
    function DashboardParamsFormCtrl(baConfig, layoutPaths, baUtil, $scope)
    {
       $scope.ParamsFormBtnClicked = function()
       {
           console.log("Date: " + $scope.simStartDate);
       }

        $scope.open = open;

        $scope.opened = false;
        $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
        $scope.format = $scope.formats[0];
        $scope.options = {
            showWeeks: false
        };
        function open() {

            $scope.opened = true;
        }

        $scope.simStartDate = new Date();
        $scope.date = new Date();

        $scope.setDate = function(startDate)
        {
            $scope.simStartDate = startDate;
        }

    }
})();

And the HTML is:

<div class="row" ng-controller="DashboardParamsFormCtrl">
    <div class="col-sm-6">
        <div class="form-group">
            <label for="inputFirstName">Simulation start date</label>
            <p class="input-group">
                <input type="text" class="form-control"
                       uib-datepicker-popup="{{format}}"
                       datepicker-options="options"
                       ng-model="date"
                       ng-change="setDate(date)"
                       is-open="opened" ng-required="true"
                       close-text="Close"
                       alt-input-formats="altInputFormats"
                       show-button-bar="true" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default"
                            ng-click="open()">
                        <i class="glyphicon glyphicon-calendar"></i>
                   </button>
               </span>
            </p>
        </div>
    </div>
8
  • 1
    It looks to me like $scope.date and $scope.simStartDate should always have the same value. $scope.date is bound to the calendar directive via ng-model and anytime it changes, $scope.simStartDate is set to be the same value. Instead of using that setDate() method on ng-change, could you just set $scope.simStartDate = $scope.date whenever you actually need it (or perhaps just use $scope.date)? Commented May 17, 2018 at 15:40
  • 1
    Just ng-model="simStartDate", rest seems useless. Commented May 17, 2018 at 15:43
  • 1
    You have alt-input-formats="altInputFormats", but altInputFormats does not appear to be defined on $scope. I'm not sure what effect that will have, but that essentially sets alt-input-formats to undefined. Commented May 17, 2018 at 15:50
  • 1
    Do you have an action attribute on the <form> element? That would cause the page to reload after submit. Commented May 17, 2018 at 19:36
  • 1
    Show us the code that executes when you click the submit button. Commented May 18, 2018 at 0:22

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.