0

I have a function that displays today's current date along with the next 60 days however I am not sure how to convert this so that it displays in a normal list, as opposed to a select element. 

var dateRange = document.getElementById('date-range'),
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

for(var day = 0; day < 60; day++) {
  var date = new Date();
  date.setDate(date.getDate() + day);
  dateRange.options[dateRange.options.length] = new Option([date.getDate(), monthNames[date.getMonth()], date.getFullYear()].join(' '), date.toISOString());
}

<select id="date-range">
</div>
  • "this so that it displays in a normal list, as opposed to a select element." I can't get the question, can you please clarify it? – qiAlex Jan 21 '20 at 16:32
  • At the moment, the dates are shown in a drop down element as the select element has been used. I'm trying to change it so that the days are just populated as a list. I've tried changing the element to a normal
      element but I get an error that 'Cannot read property 'length' of undefined....'
     –  Jan 21 '20 at 16:37

1 Answers1

0

var dateRange = document.getElementById('date-range');
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

for(var day = 0; day < 60; day++) {
  var date = new Date();
  date.setDate(date.getDate() + day);
  
  var li = document.createElement("li");
  
  
  var MyDateString = ('0' + date.getDate()).slice(-2) + '/'
             + monthNames[date.getMonth()] // +   '/'
          //   + date.getFullYear();
  
  
  
  
  li.innerHTML = MyDateString;
  dateRange.appendChild(li);
  
}
<ul id="date-range">
</ul>
DCR
  • 10,658
  • 7
  • 38
  • 86
  • This is exactly what I needed. Thank you! However it displays the full date along with the time. Is there any way just for the day and month to be shown? –  Jan 21 '20 at 16:55
  • see updated answer. Please accept if this works for you. – DCR Jan 21 '20 at 17:04