Преобразовать и разделить число/месяц в формате даты

Question

Приведенный ниже код преобразовывает даты формата 25.05.2024 в такой формат 25 / 05 / 24

const newsItems = document.querySelectorAll('.news-item');
const updNewsItems = document.querySelector('.upd-news-items');
for (let i = 0; i < newsItems.length; i++) {
  let date = newsItems[i].querySelector('.date');

  if (date) {
    date = date.textContent.replace(/[^\.\d]/g, '');
    let newDate = date.slice(8, 10);
    date = date.slice(0, 5).replace(/\./g, ' / ') + ` / ${newDate}`;
  } else {
    date = '';
  }
  let newsItem = document.createElement('div');
  newsItem.classList.add('upd-news-item');
  newsItem.insertAdjacentHTML(
    'afterbegin',
    `
   <span class="upd-news-date">${date}</span>
   `
  );
  updNewsItems.append(newsItem);
}

.news-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid blue;
  width: 200px;
  margin: 0 0 20px 0;
}

.news-item {
  border-bottom: 1px solid blue;
}

.news-item:last-of-type {
  border: 0;
}

.upd-news-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid red;
  width: 200px;
  margin: 0 0 20px 0;
}

.upd-news-item {
  border-bottom: 1px solid red;
}

.upd-news-item:last-of-type {
  border: 0;
}

<div class="news-items">
  <div class="news-item">
    <div class="date">25.05.2024</div>
  </div>
  <div class="news-item">
    <div class="date">26.05.2024</div>
  </div>
  <div class="news-item">
    <div class="date">27.05.2024</div>
  </div>
</div>
<div class="upd-news-items"></div>

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

<span class="upd-news-date">
 <span class="upd-news-day">25</span> / <span class="upd-news-month">05</span>
</span>

Answer 1

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

Предложу такой вариант решения...

const updNewsItems = document.querySelector('.upd-news-items')
const tmpl = document.querySelector('template');
document.querySelectorAll('.news-item .date').forEach(o => {
  const a = o.textContent.split('.')
  const v = `<span class="upd-news-date">
    <span class="upd-news-day">${a[0]}</span> / <span class="upd-news-month">${a[1]}</span>
  </span>`
  updNewsItems. insertAdjacentHTML('beforeend', v);
})

.news-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid blue;
  width: 200px;
  margin: 0 0 20px 0;
}

.news-item {
  border-bottom: 1px solid blue;
}

.news-item:last-of-type {
  border: 0;
}

.upd-news-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid red;
  width: 200px;
  margin: 0 0 20px 0;
}

.upd-news-item {
  border-bottom: 1px solid red;
}

.upd-news-item:last-of-type {
  border: 0;
}
/* для демонстрации */
.upd-news-date span {
  border: 1px dotted;
}

<div class="news-items">
  <div class="news-item">
    <div class="date">25.05.2024</div>
  </div>
  <div class="news-item">
    <div class="date">26.05.2024</div>
  </div>
  <div class="news-item">
    <div class="date">27.05.2024</div>
  </div>
</div>
<div class="upd-news-items"></div>

БЛОГ НА HUSL

Преобразовать и разделить число/месяц в формате даты

Ответы (1 шт):