在 javascript 中检索多个 html 值

Question

On my node.js backend, I have this:

  {
    DATE: '2021-12-11 02:17:59.317432',
    LOCATION: 'Location',
    ASSIGNED_TRAINER: 'john.smith7@g.com',
    CLIENT_USERNAME: 'Test User Name'
  },
  {
    DATE: '2022-01-04 02:27:11.278146',
    LOCATION: 'Location',
    ASSIGNED_TRAINER: 'john.smith7@g.com',
    CLIENT_USERNAME: 'Test User Name'
  },
  {
    DATE: '2021-12-15 10:30:00.000000',
    LOCATION: 'Location',
    ASSIGNED_TRAINER: 'john.smith7@g.com',
    CLIENT_USERNAME: 'Test User Name'
  }

and on the front-end, I am trying to grab the DATE field. and so what I do is this:

 <% if (data.length) {
    for(var i = 0; i < data.length; i++) { %>
      <input type="text" name="passedDates" id="passedDates" value="<%= data[i].DATE %>">
      <%  }
    } else { %>
   <% } %>

and then in my <script> tag, what I do is:

  for ( var z = 1; z <= lastDayOfM; z++ ) {
    
    const yourDate = new Date()
    var theDate = yourDate.toISOString().split('T')[0]

*here I am trying to get the values that I pass through the id 'passedDates'

    var passedDates = document.getElementById("passedDates").value

    var finalDate = passedDates.split('-');

    var yyyy = finalDate[0];
    var mm = finalDate[1];
    var dd = finalDate[2];
    var theFinalDay = dd.split(' ')

but then I log yyyy , mm , dd , and then theFinalDay[0] . But it doesn't store ALL of the date values in there. I need all of them in there, because then when going below:

    // check if todays date
    if ( z == today.getDate() && y == today.getFullYear() && m == today.getMonth() ) {
      var myTestPassedDate = theFinalDay[0]
      if (myTestPassedDate) {

*here i try to insert something into HTML , but it won't do all 3 because it only stores one.

 day.innerHTML = myTestPassedDate + "<br><img src='https://miro.medium.com/max/512/1*nZ9VwHTLxAfNCuCjYAkajg.png' style='height: 10px; width: 10px;'>"
 

 }
      day.classList.add("today");
    }

    

how do I fix what I am trying to do? sorry if it is confusing, feel free to ask questions.

Answer 1

To grab all dates from your inputs you could do:

1. Add a class to your input fields, eg js-date

2. Select all the inputs and grab their values

const getDatesFromInputs = (className) => {
  const inputNodes = document.querySelectorAll(className); // get us a NodeList
  const inputArray = Array.from(inputNodes); // turn NodeList into Array to access .map() function

  const dates = inputArray.map((inputEl) => new Date(inputEl.value));
  return dates // return Array of dates
};

3. Do with the dates whatever you like (I did not understand what you want to do with them)

const datesFromInput = getDatesFromInputs('.js-date');

const today = new Date();
const y = today.getFullYear();
const m = today.getMonth();
const d = today.getDate();

const isTodayInDates = datesFromInput.some((date) => date.getFullYear() === y && date.getMonth() === m && date.getDate() === d);