Ashutosh
Ashutosh

Reputation: 4675

AngularJS + Moment + Timezone

I am working on an Angularjs project and looking to generate dates according to user selected timezone. After lot of research, I found angular-moment.

I tried to add moment.js, moment-timezone.js, angular-moment.js

I added:

angular.module('main', [..., 'moment-picker', 'angularMoment']);

Then I injected moment in my service like this:

angular.module('main').service('UtilityServ', ['moment', 'CONSTANTS', function (moment, CONSTANTS) {

But none of the following lines works:

moment().tz()

moment.tz()

In both cases, it says moment.tz is not a function whereas :

moment().format('YYYY-MM-DD HH:MM')

works fine

Looks like angularMoment is using moment and not moment-timezone

Upvotes: 0

Views: 3754

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222532

You can just refer the moment-timezone.js as follows,

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone.min.js"></script>

DEMO

angular.module('ExampleApp', []).
      controller('MainCtrl', function ($scope) {
      console.log(moment.tz().format('YYYY-MM-DD HH:MM'));
  });
body {
      box-sizing: border-box;
      width: 500px;
      height: 100vh;
      min-height: 100vh;
      margin: 0;
      padding: 15px;
    }
    input {
     width: 100%;
    }
<!DOCTYPE html>
<html ng-app="ExampleApp">
<head>
  <title>Datetime range input UI element for AngularJS</title>
  <link rel="stylesheet" type="text/css" href="dist/datetime-range.css">
  <meta name="viewport" content="width=500,user-scalable=0">
</head>
<body ng-controller="MainCtrl">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone.min.js"></script>
</body>
</html>

Upvotes: 3

Related Questions