How to get next dates after selecting a single date with a gap of 7 days

September 15, 2022

let inputDate = document.querySelector(".inputDate"),
  submit = document.querySelector(".submit"),
  currentDate = document.querySelector(".currentDate"),
  dateAfter = document.querySelector(".dateAfter"),
  futureDays = document.querySelector(".futureDays");

submit.onclick = (e) => {
  e.preventDefault;
  futureDays.innerText = "";

  let newDate = new Date(inputDate.value);

  let something = newDate / 1000;
  let something2 = new Date(something * 1000);
  let firstDate =
    something2.getDate() +
    "-" +
    (something2.getMonth() +
    1 )+
    "-" +
    something2.getFullYear();
  

  let inSeconds = Math.floor(newDate.getTime() / 1000);

  let myArr = [];

  for (let i = 0; i < 5; i++) {
    let sixDays = Math.floor((newDate.setDate(newDate.getDate() + 7) / 1000));
    
    let newDateFormat = new Date(sixDays * 1000);
    myArr.push(
      "  " +
        newDateFormat.getDate() +
        "-" +
        (newDateFormat.getMonth() + 1) +
        "-" +
        newDateFormat.getFullYear() +
        "  "
    );
    // myArr.push(sixDays);
    futureDays.innerText = myArr;
  }
};

<input type="date" name="" id="" class="inputDate" data-date-format="DD MMMM YYYY">
<button class="submit">Submit</button>
<div class="currentDate"></div>
<div class="dateAfter"></div>
<div class="futureDays"></div>

I am trying to get the next 5 dates after a particular date ( user provided ) with a gap of 7 days in between. I was able to get the next 5 dates and store them in an array, however I am unable to get the first date that was user selected in the array.

JS:

submit.onclick = (e) => {

  e.preventDefault;
  futureDays.innerText = "";

  let newDate = new Date( inputDate.value );
  
// First Date
  let something = newDate / 1000;
  let something2 = new Date(something * 1000);
  let firstDate =
    something2.getDate() +
    "-" +
    (something2.getMonth() +
    1 )+
    "-" +
    something2.getFullYear();
  

  let myArr = [];

  for ( let i = 0; i < 5; i++ ) {

    let sixDays = Math.floor( ( newDate.setDate(newDate.getDate() + 7 ) / 1000 ) );
    
    let newDateFormat = new Date( sixDays * 1000 );
    myArr.push(
      "  " +
        newDateFormat.getDate() +
        "-" +
        (newDateFormat.getMonth() + 1) +
        "-" +
        newDateFormat.getFullYear() +
        "  "
    );

    futureDays.innerText = firstDate + myArr;
  }
};

The first date comment, in this I am able to get the first date ( user provided ) and was able to add it in the array, but is there a way that by default the user selected date is included in the array.

>Solution :

You can specify it as the array element when you initialize the array, like:

let myArr = [inputDate.value];

let inputDate = document.querySelector(".inputDate"),
  submit = document.querySelector(".submit"),
  currentDate = document.querySelector(".currentDate"),
  dateAfter = document.querySelector(".dateAfter"),
  futureDays = document.querySelector(".futureDays");

submit.onclick = (e) => {
  e.preventDefault;
  futureDays.innerText = "";

  let newDate = new Date(inputDate.value);

  let something = newDate / 1000;
  let something2 = new Date(something * 1000);
  let firstDate =
    something2.getDate() +
    "-" +
    (something2.getMonth() +
    1 )+
    "-" +
    something2.getFullYear();
  

  let inSeconds = Math.floor(newDate.getTime() / 1000);

  let myArr = [inputDate.value];

  for (let i = 0; i < 5; i++) {
    let sixDays = Math.floor((newDate.setDate(newDate.getDate() + 7) / 1000));
    
    let newDateFormat = new Date(sixDays * 1000);
    myArr.push(
      "  " +
        newDateFormat.getDate() +
        "-" +
        (newDateFormat.getMonth() + 1) +
        "-" +
        newDateFormat.getFullYear() +
        "  "
    );
    // myArr.push(sixDays);
    futureDays.innerText = myArr;
  }
};

<input type="date" name="" id="" class="inputDate" data-date-format="DD MMMM YYYY">
<button class="submit">Submit</button>
<div class="currentDate"></div>
<div class="dateAfter"></div>
<div class="futureDays"></div>