Замените ISO-Date обычной датой в HTML документе через виджет

Question

Моя проблема заключается в следующем. Я использую Duda widget Builder для создания своих собственных виджетов. В одном приложении есть Дата и по умолчанию она изображена как ISO. Теперь, преобразуя это не слишком сложно, я попробовал следующее:

if (document.getElementById("date") !== null) {
  let date = document.getElementById("date").toString();
  let dater = date.substring(0, 10);
  document.getElementById("date").innerHTML.replace(date, dater);
  console.log('Test');
}

<div class="Wrapper shadow">
  <h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>

Теперь он не выдает никаких ошибок, и он console.logs "Test". Но дата остается в ISO.
Виджет работает с jQuery Я думаю, это как-то связано с этим. Интерфейс виджета, в котором вы записываете javascript, инкапсулирован следующим образом: function (element, data, api) {'my js code from'} Пожалуйста, помогите.

Answer 1

Проблема в том, что вы никогда не обновляете содержимое элемента после работы с содержимым. Также обратите внимание, что вам не нужно использовать replace(). Попробуйте это:

let el = document.getElementById("date");
if (el) {
  el.textContent = el.textContent.substring(0, 10);
}

<div class="Wrapper shadow">
  <h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>

При этом вы просто получаете первые 10 символов строки даты, что непогрешимо. Если локаль изменится, ваш код сломается. Чтобы это исправить, вы можете создать объект Date из строки и вывести явно необходимый вам формат:

let el = document.getElementById("date");
if (el) {
  let date = new Date(el.textContent);
  let year = date.getFullYear();
  let month = ("00" + (date.getMonth() + 1)).slice(-2);
  let day = ("00" + date.getDate()).slice(-2);
  el.textContent = `${year}-${month}-${day}`;
}

<div class="Wrapper shadow">
  <h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>

Answer 2

Вы также можете использовать Момент. js для форматирования необходимой даты.

const el = document.querySelector('#date');

const myDateFormat = 'YYYY-MM-DD';
const date = el.textContent;
const newDate = moment(date, myDateFormat).format(myDateFormat);

el.textContent = newDate;

<script src="https://momentjs.com/downloads/moment.min.js"></script>

<div class="Wrapper shadow">
  <h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>

Надеюсь помочь вам и другим ^^.