Loop through list and add date variable to New Date() object so that date and times update

Dan Published at Dev

Dan

Thanks for looking.

So I've been working on this script for a few hours today and I can't work out why the "currentDate" variable is only applying to the first item in the loop. Basically, I would like both items to update.

When this script loads the date string is taken from each list item and then populated to convert the date and time based on Timezone.

Any help appreciated.

const date = {
    month: "short",
    day: "numeric"
};

const time = {
    hour: '2-digit',
    minute: "numeric",
    hour12: true,
    timeZoneName: "short"
};

var children = $(".test-list");
for (var i = 0; i < children.length; i++) {
    var currentItem = children.eq(i);
    var currentDate = currentItem.children().eq(i).find(".cms-date-time").text();

    let timeFormat = new Date(currentDate + ' GMT+1'.replace(/-/g, "/"))
    currentItem.children().eq(i).find('.date').html(Intl.DateTimeFormat(navigator.language, date).format(timeFormat));
    currentItem.children().eq(i).find('.time').html(Intl.DateTimeFormat(navigator.language, time).format(timeFormat));
    console.log(timeFormat);

}

Kinglish

Perhaps because you are iterating .test-list when you mean to be iterating .test-list .test-item. A simpler and more jQuery-ish way of going about it might be

const date = {
  month: "short",
  day: "numeric"
};

const time = {
  hour: '2-digit',
  minute: "numeric",
  hour12: true,
  timeZoneName: "short"
};

$(".test-list .test-item").each(function(i, o) {
  let currentDate = $(o).find(".cms-date-time").text();
  let timeFormat = new Date(currentDate + ' GMT+1'.replace(/-/g, "/"))
  $(o).find('.date').html(Intl.DateTimeFormat(navigator.language, date).format(timeFormat));
  $(o).find('.time').html(Intl.DateTimeFormat(navigator.language, time).format(timeFormat));
  //console.log(timeFormat);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w-dyn-list">
  <div role="list" class="test-list w-dyn-items">
    <div role="listitem" class="test-item w-dyn-item">
      <h1 class="cms-name">Marscast</h1>
      <h1 class="cms-date-time">October 5, 2022 10:00 PM</h1>
      <div class="div-block">
        <div>Converted Date:</div>
        <h1 class="date">Oct 5</h1>
      </div>
      <div>
        <div>Converted Time:</div>
        <h1 class="time">02:00 PM PDT</h1>
      </div>
    </div>
    <div role="listitem" class="test-item w-dyn-item">
      <h1 class="cms-name">Bingo Night</h1>
      <h1 class="cms-date-time">October 6, 2022 9:00 PM</h1>
      <div class="div-block">
        <div>Converted Date:</div>
        <h1 class="date">Heading</h1>
      </div>
      <div>
        <div>Converted Time:</div>
        <h1 class="time">Heading</h1>
      </div>
    </div>
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.