Я создал упрощенную версию проекта, над которым работаю. Я хочу divs в прошлом над текущей датой (выделено красным) и divs в будущем ниже. Я пытался использовать порядок в CSS, но это не сработало.
<div class = "timeline">
<div>04-10-2022</div>
<div>05-02-2022</div>
<div>06-12-2022</div>
<div>07-26-2022</div>
<div>01-15-2023</div>
<div>02-01-2023</div>
</div>
const timeline = document.querySelector('.timeline')
const timeline_items = document.querySelectorAll('.timeline > div')
const today = new Date()
const s = new Intl.DateTimeFormat("en-uk", {
dateStyle: "short"
})
timeline_items.forEach(dateitem => {
const dateConvert = new Date(dateitem.textContent);
const newDate = s.format(dateConvert);
dateitem.innerHTML = newDate;
})
const date_container = document.createElement("div");
date_container.style.background = "red";
const DateText = document.createTextNode(s.format(today));
date_container.appendChild(DateText);
timeline.appendChild(date_container)
🤔 А знаете ли вы, что...
JavaScript имеет множество встроенных объектов, таких как Array, Date и Math.
Имея контейнер (.timeline), вы можете:
today;Сегодняшняя дата будет оформлена в соответствии с правилом css, выбирающим элементы .today.
main();
function main(){
const timeline = document.querySelector('.timeline');
const todayFormatted = getTodayFormatted();
const today = addTodayToList(timeline, todayFormatted);
const dates = [...timeline.children];
sortDates(dates);
refreshList(timeline, dates);
}
//returns today as MM-DD-YYYY
function getTodayFormatted(){
const today = new Date();
const dd = today.getDate().toString().padStart(2, '0');
const mm = (today.getMonth() + 1).toString().padStart(2, '0');
const yyyy = today.getFullYear();
return `${mm}-${dd}-${yyyy}`;
}
//adds today date to target if not present yet,
//and adds also the 'today' class (and returns the element)
function addTodayToList(target, today){
//searches if the today date was present already in the list
let dates = target.querySelectorAll(':scope > div');
//isn't safe against duplicates existing in the html list
let todayDate = [...dates].filter( date => date.textContent == today)?.[0];
//if not, creates a new date and append to list
if (!todayDate){
todayDate = document.createElement('div');
todayDate.textContent = today;
target.append(todayDate);
}
//sets anyway its class 'today'
todayDate.classList.add('today');
return todayDate;
}
//sorts the elements in dates according to their date content
//(based on the fact the dates rearranged as YYYY-MM-DD follows alph. order)
function sortDates(dates){
dates.sort((a, b) => {
const [aMonth, aDayOfMonth, aYear] = a.textContent.split("-");
const [bMonth, bDayOfMonth, bYear] = b.textContent.split("-");
const aRearranged = `${aYear}-${aMonth}-${aDayOfMonth}`;
const bRearranged = `${bYear}-${bMonth}-${bDayOfMonth}`;
return aRearranged.localeCompare(bRearranged);
});
}
//empties the target element and appends to it the passed dates
function refreshList(target, dates){
target.innerHTML = '';
target.append(...dates);
}.today{
background: red;
}<div class = "timeline">
<div>04-10-2022</div>
<div>05-02-2022</div>
<div>06-12-2022</div>
<div>07-26-2022</div>
<div>01-15-2023</div>
<div>02-01-2023</div>
<div>06-11-2023</div>
<div>03-08-2023</div>
</div>