0xD34F

Помогите пожалуйста понять почему следующий код выводит undefined, а не 5

Выводит где? Как вы этот код запускали? Раз уж вы решили скрыть эту информацию...

Ответ номер раз: а чо вы врёте-то? Открываем консоль, копируем код, запускаем и видим, что выводится 5.

Ответ номер два: jsfiddle, например, по умолчанию оборачивает код в window.onload, соответственно, переменная b в window не попадёт - потому и undefined. (UPD. Исправили эту дичь).

Кусок кода, который в этом виноват:

$(document).mouseup(function (e) { 
    var popup = $('#free_moto_lesson');
    if (e.target!=popup[0]&&popup.has(e.target).length === 0){
        $('.overlay').fadeOut();
        $(popup).fadeOut();
    }
    return false;
});

А конкретно - return false.

как сделать, чтобы можно было выбрать максимум 5 дней

Ограничивать максимальную дату конца интервала при изменении начала, и минимальную дату начала при изменении конца. Как-то так.

кстати когда убираю кусок кода, который переводит на русский, все работает

Так форматы дат разные - вот и не получается правильно распарсить.

UPD. Вынесено из комментариев.

А как в таком случае сбросить начальную и конечную дату, если нужно другие числа выбрать?

Можно сбрасывать интервал по клику на отдельную кнопку. Или по повторному клику на границу интервала в соответствующем дейтпикере (по нижней в #from, по верхней в #to; почему не по любой границе в любом - чтобы можно было выставить интервал в один день, иначе будет сбрасываться). Или... думайте.

Где элементы находятся, и индексы тех, что надо получить:

const parentSelector = '.menu';
const indices = [ 0, 1, 4, 8 ];

Получаем:

const $elems = $(parentSelector).children().filter(i => indices.includes(i));

// или

const $elems = $(indices.map(n => `> :eq(${n})`).join(', '), parentSelector);

Или, к чёрту jquery:

const elems = Array.prototype.filter.call(
  document.querySelector(parentSelector).children,
  (n, i) => indices.includes(i)
);

// или

const elems = document
  .querySelector(parentSelector)
  .querySelectorAll(indices.map(n => `:scope > :nth-child(${n + 1})`));

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let X, Y;

document.addEventListener('mousemove', function(e) {
  X = e.clientX;
  Y = e.clientY;
});

function drawRect(x, y, w, h) {
  const dx = x + w / 2;
  const dy = y + h / 2;
  const angle = Math.atan2(X - dx, Y - dy);

  ctx.save();
  ctx.translate(dx, dy);
  ctx.rotate(-angle);
  ctx.translate(-dx, -dy);
  ctx.strokeRect(x, y, w, h);
  ctx.restore();
}

function draw() {
  ctx.clearRect(0, 0, innerWidth, innerHeight);
  drawRect(50, 50, 50, 50);
  requestAnimationFrame(draw);
}

draw();

Так:

$('body').html(Array.from({ length: 4 }, (n, i) => `
  <svg width="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="border" cx="20" cy="20" r="18"/>
    <circle class="fill" cx="20" cy="20" r="18"/>
    <text x="12" y="25" class="small">0${i + 1}</text>
  </svg>
`));


const $elements = $('.fill');

function animateElem(index) {
  $elements.removeClass('animation').eq(index).addClass('animation');
}

$(document).on('animationend', function(e) {
  $(e.target).removeClass('animation');
  const index = (1 + $elements.index(e.target)) % $elements.length;
  animateElem(index);
});

$(document).on('click', 'svg', function(e) {
  animateElem($elements.index($('.fill', this)));
});

.border {
  fill: transparent;
  stroke: #ccc;
  stroke-width: 2px;
}

.fill {
  fill: transparent;
  stroke: #000;
  stroke-width: 2px;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transform: rotate(-90deg);
  transform-origin: center;
}

.animation {
  animation: spin 2s both linear;
}

@keyframes spin {
  to {
    stroke-dashoffset: 1;
  }
}

??

Внутри каких элементов надо переключать класс, и что это за класс:

const parentSelectors = [ '.maplabels', '#map' ];
const activeClass = 'active';

Вот jquery, как вы и хотели:

$(document).on('click', parentSelectors.map(n => `${n} >`).join(','), e => {
  const index = $(e.currentTarget).index();
  parentSelectors.forEach(n => $(n)
    .children()
    .removeClass(activeClass)
    .eq(index)
    .addClass(activeClass)
  );
});

Или, к чёрту jquery:

const parents = parentSelectors.map(n => document.querySelector(n));

document.addEventListener('click', ({ target: t }) => {
  const parent = parents.find(n => n !== t && n.contains(t));
  if (parent) {
    const index = [...parent.children].findIndex(n => n.contains(t));
    for (const { children } of parents) {
      for (let i = 0; i < children.length; i++) {
        children[i].classList.toggle(activeClass, i === index);
      }
    }
  }
});

const nestedVal = {
  get(path, root) {
    return path.split('.').reduce((p, c) => p[c], root);
  },
  set(path, root, val) {
    path = path.split('.');
    const key = path.pop();
    nestedVal.get(path.join('.'), root)[key] = val;
  }
};

Градиентом можно сделать.

Ну так и пишите - unix - вместо format:

moment().add(1, 'months').date(10).unix()

Так?

Как извлечь случайный элемент массивоподобного объекта:

const randomItem = arr => arr[Math.random() * arr.length | 0];

Извлекаем:

// одно значение
const randomName = randomItem(arr_names);

// или сразу несколько
const randomNames = Array.from(
  { length: 5 },
  randomItem.bind(null, arr_names)
);

// работать можно не только с массивами, но и, например, со строками
const randomChar = randomItem('abcdefg');

// и HTMLCollection тоже будет как надо обработана
const randomImage = randomItem(document.images);

Так?

$(elem).closest('.parent').addClass('active_list')

Потому что в jquery ничего такого нет, это свойство элемента. Которое получить можно так:

$('#text-column').prop('scrollHeight')
// или
$('#text-column').get(0).scrollHeight
// или
$('#text-column')[0].scrollHeight

$('.va-city-list').on('click', '.list-city', function() {
  console.log($(this).data('city'));
});

или

$('.list-city').click(e => console.log($(e.target).attr('data-city')));

или

document.querySelector('.va-city-list').addEventListener('click', e => {
  const { city } = e.target.dataset;
  if (city) {
    console.log(city);
  }
});

или

const onClick = e => console.log(e.target.getAttribute('data-city'));
document.querySelectorAll('.list-city').forEach(n => n.addEventListener('click', onClick));

или

for (const n of document.getElementsByClassName('list-city')) {
  n.onclick = onClick;
}

function onClick() {
  console.log(this.attributes['data-city'].value);
}

А зачем двигаться "пошагово"? Известны же координаты кнопок - можно вычитать одни из других, и сразу получать количество шагов:

const keyboard = [
  'abcde123',
  'fghij456',
  'klmno789',
  'pqrst.@0',
  'uvwxyz_/',
].reduce((acc, [...row], iRow) => {
  row.forEach((key, iCol) => acc[key] = [ iRow, iCol ]);
  return acc;
}, {});

function tvRemote(word) {
  let steps = word.length;
  let prev = [ 0, 0 ];

  for (const n of word) {
    const curr = keyboard[n];
    steps += Math.abs(prev[0] - curr[0]) + Math.abs(prev[1] - curr[1]);
    prev = curr;
  }

  return steps;
}

Сделать делегированный обработчик клика, в котором проверять, где случилось событие. Если кнопка - значит, надо открыть окно. Если корневой элемент окна или .close - наоборот, закрыть.

const modal = document.querySelector('.modal');
const close = modal.querySelector('.close');

document.addEventListener('click', function(e) {
  if (e.target === modal || e.target === close) {
    modal.style.display = 'none';
  }

  if (e.target.tagName === 'BUTTON') {
    modal.style.display = 'block';
  }
});

Вместо pageX и pageY используйте clientX и clientY.