How to make inner.html select and show <li> element based on current date?-CodePudding

I'm trying to make a static web page where the index page on loading shows only one 'li'-element based opon the current date. The 'li'-elements consist of a date (a Saturday), and I need the elemt to be displayed from the one week before the date in the 'li'-element, but no longer than that date.(The 'li' containing a date nearest, but not past, the current date.)

Totally freesh when it comes to java script, can this be done using java script? Is so: am I on the rigth track using inner.html?

Help and tips will be higly appreciated!

let html = document.getElementById("myList").innerHTML;
document.getElementById("demo").innerHTML = html;

ul {
  display: none;
}

<html>

<head>
  <title>Index page</title>

</head>

<body>
  <h1>This Saturday</h1>
  <p>Here you can find the program for the upcoming Saturday. </p>
  <p id="demo"></p>
  <ul id="myList">
    <li><a href="2022-09-03.html" target="blank">2022-09-03</a></li>
    <li><a href="/2022-09-10.html" target="blank">2022-09-10</a></li>
    <li><a href="/2022-09-17.html" target="blank">2022-09-17</a></li>
    <li><a href="/2022-09-24.html" target="blank">2022-09-24</a></li>
    <li><a href="/2022-10-01.html" target="blank">2022-10-01</a></li>
    <li><a href="/2022-10-08.html" target="blank">2022-10-08</a></li>
    <li><a href="/2022-10-15.html" target="blank">2022-10-15</a></li>
  </ul>
  <div>
  </div>
</body>

</html>

CodePudding user response：

You can compare Date objects, with the conditions being:

Event date >= today

And

Today >= Event day - 7 days

Today (2022-09-05) only shows 2022-9-10 event.

let demo = document.getElementById("demo")

// TODAY's DATE
let today = new Date()

document.querySelectorAll('#myList li').forEach(function(el) {
  // EVENT DATE
  let thisDate = new Date(el.textContent)
  
  let thisDateMinus7Days = new Date(el.textContent)
  // EVENT DATE - 7 DAYS
  thisDateMinus7Days.setDate(thisDateMinus7Days.getDate() - 7);

  // IF EVENT DATE IS IN RANGE, COPY THE LINK
  if (thisDate >= today && today >= thisDateMinus7Days) {
    document.getElementById("demo").append(el.children[0])
  }
})

ul {
  display: none;
}

<h1>This Saturday</h1>
<p>Here you can find the program for the upcoming Saturday. </p>
<p id="demo"></p>
<ul id="myList">
  <li><a href="2022-09-03.html" target="blank">2022-09-03</a></li>
  <li><a href="/2022-09-10.html" target="blank">2022-09-10</a></li>
  <li><a href="/2022-09-17.html" target="blank">2022-09-17</a></li>
  <li><a href="/2022-09-24.html" target="blank">2022-09-24</a></li>
  <li><a href="/2022-10-01.html" target="blank">2022-10-01</a></li>
  <li><a href="/2022-10-08.html" target="blank">2022-10-08</a></li>
  <li><a href="/2022-10-15.html" target="blank">2022-10-15</a></li>
</ul>
<div>
</div>

CodePudding user response：

I'd suggest that you render your dates from JavaScript. The reason for this is that the HTML will only contain whatever you want to show, without having to hide anything.

Create an array of your dates and filter out any dates that have passed.
The remaining dates in the array should all be dates in the future or today.
The first date in the filtered array is the nearest upcoming date or today.

Create your <a> tag and render it to the page.

const dates = [
  '2022-09-03',
  '2022-09-10',
  '2022-09-17',
  '2022-09-24',
  '2022-10-01',
  '2022-10-08',
  '2022-10-15'
];

const today = new Date();

const upcomingDates = dates.filter(dateString => {
  const upcomingDate = new Date(dateString);
  return today <= upcomingDate;
});

const nearestUpcomingDate = upcomingDates[0];

if (typeof nearestUpcomingDate !== 'undefined') {
  const anchor = document.createElement('a');
  anchor.href = `/${nearestUpcomingDate}.html`;
  anchor.target = '_blank';
  anchor.textContent = nearestUpcomingDate;
  document.getElementById('demo').append(anchor);
}

<h1>This Saturday</h1>
<p>Here you can find the program for the upcoming Saturday.</p>

<div id="demo"></div>

CodePudding user response：

If i understood correctly, you want to display the current date in the <h1>-Tag and want to create a list starting with the last Saturday, following the next six Saturdays:

function returnDate (date) {
    let day = date.getDate() < 10 ? "0"   date.getDate() : date.getDate();
    let month = date.getMonth()   1 < 10 ? `0${date.getMonth()   1}` : date.getMonth()   1;
    return `${date.getFullYear()}-${month}-${day}`; 
}

let today = new Date(); // gets today's date
let todayDay = today.getDay(); // gets the weekday of today, 0 = sunday / 6 = saturday

let dayDifference = today.getTime() - ((todayDay   1) * 86400000);
let lastSat = todayDay != 6 ? dayDifference : today.getTime();

let output = ``;

for (var i = 0; i < 7; i  ) {
    let date = returnDate(new Date(lastSat   (7 * i * 86400000)));
    output  = 
    `<li>
        <a href="${date}.html" target="blank">${date}</a>
    </li>`
}

document.getElementById('today').innerHTML = returnDate(today);
document.getElementById('listSaturdays').innerHTML = output;

<h1 id="today"></h1>
<ul id="listSaturdays"></ul>

The function returnDate (date) {} gives back the date formatted into this "2022-09-05".

let dayDifference = today.getTime() - ((todayDay 1) * 86400000); This variable stores, when the last saturday was. today.getTime() gets the milliseconds since the Epoche (1970-01-01), ((todayDay 1) * 86400000) substracts the amount of milliseconds needed to get to last saturday. One day = 86400000. The Date of last Saturday is stored in milliseconds since the Epoche

let lastSat = todayDay != 6 ? dayDifference : today.getTime() This checks if today is a saturday, if so, the variable lastSat is set to today (if you always want to have the last saturday included, just set lastSat to dayDifference) let lastSat = dayDifference;

After that we create a for-loop to get the next six Saturdays and we store it in the variable output. After we set the innerHTML of the <ul> to output and the <h1> to todays date.

@GrafiCode's example is similar to mine, but i dont think his shows only Saturdays