получить месяц и год из javascript и показать в нескольких разделах на странице html

Question

У меня есть код js, чтобы получить месяц и год, и мне нужно показать этот результат в 6 разделах на одной странице. Я искал в Google, а также заглянул в SO, но я нигде не мог найти точного ответа, может быть, кто-то может опубликовать ссылку, если этот вопрос окажется дублирующимся. Код js ниже:

var mydate = new Date(),
    year = mydate.getFullYear();
var month = mydate.getMonth(),
    montharray = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
monthyear = (" " + montharray[month] + " " + year);
document.getElementById("my1").innerHTML = monthyear;

Поскольку идентификатор не может использоваться более одного раза на странице, я подумал, почему бы просто не добавить 6 идентификаторов, например:

document.getElementById("my2").innerHTML = monthyear;
document.getElementById("my3").innerHTML = monthyear;
document.getElementById("my4").innerHTML = monthyear;
document.getElementById("my5").innerHTML = monthyear;
document.getElementById("my6").innerHTML = monthyear;

Извините Я не программист, поэтому я только что нашел обходной путь, но уверен, что это не эффективный способ показать результат. Я работал с queryselectorall после просмотра различных примеров в SO, но я вообще не мог заставить это работать. Пожалуйста, приветствуются любые рекомендации! Спасибо.

Answer 1

Это легко сделать в чистом виде JS, но с моментом js это действительно становится очевидным:

const thisMonth = moment().format("MMMM YYYY");

const divs = document.getElementsByClassName("date");

for( let div of divs) {
  div.innerHTML = thisMonth
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.3/moment.min.js"></script>

<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>

Answer 2

function monthDateFormatted() {
  const date = new Date();

  const years = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
  const month = new Intl.DateTimeFormat('en', { month: 'long' }).format(date);

  return `${month} ${years}`;
}

Надеюсь, это поможет, просто повторно используйте метод monthDateFormatted, в котором вы устанавливаете внутренний HTML. (или где-нибудь еще, где вам нужна эта функция, возможно, внутри нижнего колонтитула)

Вы можете сократить метод, объединив две отформатированные даты, однако для удобства чтения я подумал, что оставлю его простым.

Вы можете всегда добавлять аргумент:

function monthDateFormatted(aDate) {
  const date = aDate || new Date();
  // .. rest of function
}

Все зависит от вас.

Примечание: этот API (Intl.DateTimeFormat) может не поддерживаться в более старых версиях Inte rnet Explorer