Trouble with date with AngularJs script in HTML

Question

I come to you because in my web page I want to display the time which come from an Angular script. So I have in my HTML :

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<p class="alert alert-info">Time is: {{mytime | date:'shortTime'}}</p>

and my script :

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function ($scope, $log) {
    $scope.mytime = new Date();

    $scope.hstep = 1;
    $scope.mstep = 15;

    $scope.options = {
        hstep: [1, 2, 3],
        mstep: [1, 5, 10, 15, 25, 30]
    };

    $scope.ismeridian = true;
    $scope.toggleMode = function() {
        $scope.ismeridian = ! $scope.ismeridian;
    };

    $scope.update = function() {
        var d = new Date();
        d.setHours( 14 );
        d.setMinutes( 0 );
        $scope.mytime = d;
    };

    $scope.changed = function () {
        $log.log('Time changed to: ' + $scope.mytime);
    };

    $scope.clear = function() {
        $scope.mytime = null;
    };
});

But only "Time is :" is displayed.

Any idea ? Thanks in advance.

Arun Ghosh · Accepted Answer · 2016-07-22 11:25:02Z

2

I think you missed ng-app and ng-controller tah

<body ng-app>
   <p ng-controller="TimepickerDemoCtrl" class="alert alert-info">Time is: {{myTime | date:'shortTime'}}</p>
</body>

answered Jul 22, 2016 at 11:25

Arun Ghosh

7,7741 gold badge28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hcetipe Over a year ago

First thanks for your response. I actually put it on a div above, so I did try to put it where you told me to put it, but it didn't work..

Eddie · Accepted Answer · 2016-07-22 12:26:59Z

1

After checking the code you provided, I went to Plunker to test it. First thing I noticed was that you were not referencing the module in the ng-app.

ng-app="ui.bootstrap.demo"

The second thing was that the console was showing a module dependence error related to ui.bootstrap. I just added that dependency and everything was fine.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap.js"></script>

Please, check the full working example.

answered Jul 22, 2016 at 12:26

Eddie

8326 silver badges13 bronze badges

4 Comments

Hcetipe Over a year ago

Thanks responding.Is it necessary to put the ng-app in the html 's tag ?

Hcetipe Over a year ago

Because I put previously in a div. Like that : <div ng-app="ui.bootstrap.demo" ng-controller="TimepickerDemoCtrl"> <p class="alert alert-info">Time is: {{mytime | date:'shortTime'}}</p> </div>

Eddie Over a year ago

It's necessary because a controller should be related to some module. Keep in mind you could have many modules on a single page. If you don't specify to which module this controller relates, it would not be able to "load".

Eddie Over a year ago

Your example works too, but it's more common to put ng-app into the head and the controller somewhere between the body and any of its child elements, like divs and so on. Please, if you think this answer helped you solve the issue, feel free to mark it as the answer =)

Disha · Accepted Answer · 2016-07-22 11:33:39Z

0

You have given incorrect name in html , change myTime to mytime

Time is: {{mytime | date:'shortTime'}}

answered Jul 22, 2016 at 11:33

Disha

8421 gold badge11 silver badges40 bronze badges

1 Comment

Hcetipe Over a year ago

Sorry, it was just a copying mistake, I actually wrote "mytime" in the code, but thanks for responding.. Any ohter idea?

Nirmal Borkar · Accepted Answer · 2016-07-22 11:36:37Z

0

You have written it wrong in the HTML file. i.e "myTime". Change it to "mytime"

Time is: {{mytime | date:'shortTime'}}

answered Jul 22, 2016 at 11:36

Nirmal Borkar

1263 bronze badges

1 Comment

Hcetipe Over a year ago

Sorry, it was just a copying mistake, I actually wrote "mytime" in the code, but thanks for responding.. Any ohter idea?

Collectives™ on Stack Overflow

Trouble with date with AngularJs script in HTML

4 Answers 4

1 Comment

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related