How do I show the dates for the next 4 days in javascript?

Question

I have been trying to get the dates in the format "Month Day" (eg Jun 28) for an app I'm making for the next 4 days. Here's the code I've been working on, based on this solution I found for the next day:

now.setDate(now.getDate() + 1)

which returns me an epoch timestamp.

let now = new Date();

function timeConverter(epoch) {
let a = new Date(epoch * 1000);
let months = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ];

  let month = months[a.getMonth()];
  let date = a.getDate();
  let time = month + " " + date;
  return time;
}

let tomorrow = now.setDate(now.getDate() + 1);

let tomorrowDay = document.querySelector(".next1");
tomorrowDay.innerHTML = timeConverter(tomorrow);

let afterTomorrow = now.setDate(now.getDate() + 2);

let aftertomorrowDay = document.querySelector(".next2");
aftertomorrowDay.innerHTML = timeConverter(afterTomorrow);

And so on where I add +3 and +4 for the next 2 days. This gives me random dates, such as, respectively, Jul 19, Jan 9, Mar 27, and Mar 10. I don't know what is wrong with the code specifically, but there is a detail, which is the fact that when I console log today's date

let now = new Date();
console.log(now)

It tells me it's July 8th, when it's June 28th. I don't know if it's that that's messing everything up or if the code is wrong. Can someone help me with suggestions to improve the code or any ways to get the correct days in this format for the next 4 days?

score 0 · Answer 1 · answered Jun 28 '19 at 19:30

using the function from here (Add days to JavaScript Date) I was able to modify your code to get it to work. One major issue was adding epoch, instead of just passing the date object and using it.

function timeConverter(thedate){
let months = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ];

  let month = months[thedate.getMonth()];
  let date = thedate.getDate();
  let time = month + " " + date;
  return time;
}

Date.prototype.addDays = function(days) {
    var date = new Date(this.valueOf());
    date.setDate(date.getDate() + days);
    return date;
}

var date = new Date();
console.log(timeConverter(date.addDays(1)));
console.log(timeConverter(date.addDays(2)));

Thank you very much for your suggestion. I found a way around it by using the timestamp provided by the API I'm using and passing it through a time converter function. It is working correctly now. Thank you for your time! — mfs, Jun 29 '19 at 04:22

Jacob Brazeal · Answer 2 · 2019-06-28T19:44:16.617

You don't need the * 1000 in timeConverter: the number returned by .setDate(now.getDate() + 1); is already in milliseconds.

Also Eduard's answer: https://stackoverflow.com/a/56812396/5478284.

Also, it's odd that your console is logging today as July 8th. Is your system clock off? Can you confirm that typing just these lines

let now = new Date();
console.log(now)

produces July 8th? This would seem to be a separate issue.

score 0 · Answer 3 · answered Jun 28 '19 at 19:39

In the below line you change the now date to tomorrow.
let tomorrow = now.setDate(now.getDate() + 1);

So when you try to set the afterTomorrow date, you are using a "new" now date.
let afterTomorrow = now.setDate(now.getDate() + 2);

The below code works fine.

var today = new Date();
var tomorrow = new Date();
var afterTomorrow = new Date();
var afterAfterTomorrow = new Date();
var afterAfterAfterTomorrow = new Date();

tomorrow.setDate(today.getDate()+1);
afterTomorrow.setDate(today.getDate()+2);
afterAfterTomorrow.setDate(today.getDate()+3);
afterAfterAfterTomorrow.setDate(today.getDate()+4);

score 0 · Answer 4 · answered Jun 28 '19 at 19:45

I would use moment.js because it allows for formatting and other date functions that are well tested.

function fnProcess() {
  
  var startdate = moment();
  var new_date = [];
  var sHTML = "<table border=1>";

  for (i = 0; i < 5; i++) {
    
    new_date[i] = moment().add(i,"days").format("MMM DD");
    
    sHTML = sHTML + "<tr><td>" + new_date[i] + "</td></tr>";
    
  }

  sHTML = sHTML + "</table>";

  $("#result").html(sHTML);
}

#result {padding:20px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a href="https://momentjs.com/docs/">Moment.js Docs</a></p>

<button onclick="fnProcess()">Process</button>

<div id="result"></div>

CALEB KPABITEY · Answer 5 · 2019-06-28T19:58:10.300

let a = new Date(epoch * 1000);

should actually be

let a = new Date(epoch);

Since the epoch parameter is already a valid timestamp

I would however avoid using timestamps altogether

function timeConverter(date) {
  let splitDate = date.toDateString().split(" ");
  let time = splitDate[1] + " " + splitDate[2];
  return time;
}

and pass a date

let tomorrow = new Date();
tomorrow.setDate(now.getDate() + 1);
timeConverter(tomorrow)

let afterTomorrow = new Date();
afterTomorrow.setDate(now.getDate() + 2);
timeConverter(afterTomorrow)

Initialising tomorrow with new Date() ensures a date object is assigned when you call setDate instead of a timestamp

Of course if you already have moment in your project then you can also use

moment(new Date).add(1, 'day').format('MMM DD')

Thank you very much for your suggestion. I found a way around it by using the timestamp provided by the API I'm using and passing it through a time converter function. It is working correctly now. Thank you for your time! — mfs, Jun 29 '19 at 04:24

How do I show the dates for the next 4 days in javascript?

5 Answers5