Почему не работает moment.js?

Question

[Сергей Бурдужа]

Я хочу сделать себе часы на сайте, чтобы они показывали точное время только по лондону и другим городам.
Установил moment.js с помощью npm и переместил папку с moment.js в директорию с библиотеками.
Подключил перед body moment.js и английскую локаль.

<script src="assets/libs/slick/slick.min.js"></script>
<script src="assets/libs/moment/locale/en-gb.js"></script>

Далее в файле main.js прописал

$(function () {
  /*
      https://www.jqueryscript.net/animation/Smooth-Mouse-Wheel-Scrolling-Plugin-With-jQuery-easeScroll.html
      ===========================*/
  $("html").easeScroll({
    frameRate: 60,
    animationTime: 1000,
    stepSize: 90,
    pulseAlgorithm: 1,
    pulseScale: 8,
    pulseNormalize: 1,
    accelerationDelta: 20,
    accelerationMax: 1,
    keyboardSupport: true,
    arrowScroll: 50,
    touchpadSupport: true,
    fixedBackground: true
  });

  /*toggle header-menu
  =======================================*/
  $('#js-menu-btn').on('click', function(){
    $('#js-header-menu').slideToggle();
  });

  /*show tarrif list
  =======================================*/
  var jsItem = $('#js-tarrif .tarrif__item');

  jsItem.on('mouseenter', function(){
    $(this).find('.tarrif__item-list').slideDown(600);
  });

  jsItem.on('mouseleave', function(){
    $(this).find('.tarrif__item-list').slideUp(300);
  });

  /*clients__slider
  =======================================*/
  $('#js-clients__list').slick({
    slidesToShow: 4,
    slidesToScroll: 3,
    responsive: [
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true
      }
    },
    {
      breakpoint: 992,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
  });

});

window.onload = function(){
  var moment = moment();
  var format = 'H:m:s';

  window.setInterval(function(){
    var clock = document.getElementById("js-clock-content");
      clock.innerHTML = moment().format(format);
    }, 1000);
};

Но получаю ошибку

Uncaught TypeError: Cannot read property 'defineLocale' of undefined
    at en-gb.js:11
    at en-gb.js:7
    at en-gb.js:8

Что я делаю не так?

Answer 1

[Сергей Бурдужа]

Все наконец-то заработало.
Нужно подключить moment-timezone-with-data.min.js перед moment.js

И в коде прописать следующее

var now = moment();
  var clock = document.getElementById("js-clock-content");

  moment.locale('en-gb');

  window.setInterval(function(){
    clock.innerHTML = moment().tz("Europe/London").format('HH:mm:ss');
  }, 1000);

Всем спасибо))

Comments

[Coder321]

Думаю заработало не из-за этого изменения, в приведенном коде вы переопределяете переменную

[Сергей Бурдужа]

Coder321,
Я тот код уже существенно изменил

/* clock in header
  ====================================================*/
  var now = moment();
  var clock = document.getElementById("js-clock-content");

  moment.locale('en-gb');

  window.setInterval(function(){
    clock.innerHTML = moment().tz("Europe/London").format('HH:mm:ss');
  }, 1000);

Answer 2

[Алексей Уколов]

Подключил перед body moment.js и английскую локаль.

Вы подключили Slick и английскую локаль, но не moment:

<script src="assets/libs/slick/slick.min.js"></script>
<script src="assets/libs/moment/locale/en-gb.js"></script>

Comments

[Сергей Бурдужа]

да, извините.
Теперь пишет, что "moment is not a function"

<script src="assets/libs/moment/min/moment.min.js"></script>
<script src="assets/libs/moment/locale/en-gb.js"></script>

[Алексей Уколов]

Где пишет, в консоли? А что ещё там есть? Путь до файла правильный?

[leni_m]

Сергей Бурдужа, может main.js отрабатывает раньше moment.js и еще не знает о существовании этой функции?

[Сергей Бурдужа]

Алексей Уколов, Я решил проблему с выводом на экран.

Вот результат в main.js

var now = moment();
  var clock = document.getElementById("js-clock-content");

  moment.locale('en-gb');

  moment().tz.setDefault("Europe/London");

  window.setInterval(function(){

    clock.innerHTML = moment().format('HH:mm:ss');
  }, 1000);

Подключил в index скрипты перед body

<script src="assets/libs/moment/min/moment-with-locales.min.js"></script>
<script src="assets/libs/moment-timezone/moment-timezone.js"></script>

Проблема была в том, что их нужно было подключить перед jquery. Я об этом не знал. Теперь время выводится на экран. Только мне нужно показать время с часовым поясом london.
Для этого подключил moment-timezone ниже.

Но в этом месте
moment().tz.setDefault("Europe/London");
выводится ошибка

jquery.min.js:2 Uncaught TypeError: Cannot read property 'setDefault' of undefined
    at HTMLDocument.<anonymous> (main.js? [sm]:7)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

[Сергей Бурдужа]

leni_m, я уже написал ниже, что moment.js нужно было подключить выше jquery. Теперь проблема в том, как показать время по лондону.

[Сергей Бурдужа]

Если прописать moment().tz("Europe/Berlin");
То выскакивает другая ошибка

moment-timezone.js:476 Moment Timezone has no data for Europe/Berlin. See http://momentjs.com/timezone/docs/#/data-loading/

Я понял, что для того, чтобы поменять временную зону для объекта moment(), нужно прописать таки образом
moment().tz()
а не так как я делал раньше
moment.tz()

Так вот, теперь возникла другая проблема появилась. Я перешел на сайт чтобы исправить ошибку и оказывается, что там тоже используется moment.tz.add("Europe/London");