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>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
madu
  • 5,232
  • 14
  • 56
  • 96
  • 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`)? – Nathan Beck May 17 '18 at 15:40
  • 1
    Just ng-model="simStartDate", rest seems useless. – Petr Averyanov May 17 '18 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`. – Lex May 17 '18 at 15:50
  • Thanks guys. I tried using just simStartDate and setting simStartDate==date and also removing alt-input-formats. None of them seem to work. simStartDate gets set properly when I select a date, when later when I click submit, the date has changed it to its initialized value. – madu May 17 '18 at 16:09
  • 1
    Do you have an `action` attribute on the `
    ` element? That would cause the page to reload after submit.
     – georgeawg May 17 '18 at 19:36
  • @georgeawg Thank you. But there is no action element. I am confused how this is happening. – madu May 17 '18 at 23:48
  • 1
    Show us the code that executes when you click the submit button. – georgeawg May 18 '18 at 00:22
  • @georgeawg its $scope.ParamsFormBtnClicked() I have shown in the JS. RIght now I am just printing out $scope.simStartDate. – madu May 18 '18 at 00:29

0 Answers0