How to get next seven days from X and format in JS

Go To StackoverFlow.com

4

I want to print something like this (a 7-day calendar) but with the ability to start from any date I want.

Monday, 1 January 2011
Tuesday, 2 January 2011
Wednesday, 3 January 2011
Thursday, 4 January 2011
Friday, 5 January 2011
Saturday, 6 January 2011
Sunday, 7 January 2011

So for example I want to show next seven days from 22 of February. Have no idea how to handle this.

2012-04-05 16:33
by z-x
What have you tried?j08691 2012-04-05 16:41


10

This seems to be what you're looking for:

function GetDates(startDate, daysToAdd) {
    var aryDates = [];

    for (var i = 0; i <= daysToAdd; i++) {
        var currentDate = new Date();
        currentDate.setDate(startDate.getDate() + i);
        aryDates.push(DayAsString(currentDate.getDay()) + ", " + currentDate.getDate() + " " + MonthAsString(currentDate.getMonth()) + " " + currentDate.getFullYear());
    }

    return aryDates;
}

function MonthAsString(monthIndex) {
    var d = new Date();
    var month = new Array();
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";

    return month[monthIndex];
}

function DayAsString(dayIndex) {
    var weekdays = new Array(7);
    weekdays[0] = "Sunday";
    weekdays[1] = "Monday";
    weekdays[2] = "Tuesday";
    weekdays[3] = "Wednesday";
    weekdays[4] = "Thursday";
    weekdays[5] = "Friday";
    weekdays[6] = "Saturday";

    return weekdays[dayIndex];
}

var startDate = new Date();
var aryDates = GetDates(startDate, 7);
console.log(aryDates);​
​

Result (as of today):

["Thursday, 5 April 2012",
 "Friday, 6 April 2012", 
 "Saturday, 7 April 2012", 
 "Sunday, 8 April 2012", 
 "Monday, 9 April 2012", 
 "Tuesday, 10 April 2012", 
 "Wednesday, 11 April 2012", 
 "Thursday, 12 April 2012"]

Here's a working fiddle.

2012-04-05 16:49
by James Hill
Thank you verry much! It's far easier to learn from working example than pure theory - z-x 2012-04-06 13:39


3

An initial date:

var startingDay = new Date(year, month, day);

A whole week from startingDay:

var thisDay = new Date();
for(var i=0; i<7; i++) {
  thisDay.setDate(startingDay.getDate() + i);
  console.log(thisDay.format());
}

The formatting function:

Date.prototype.format = function(){
    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];        
    var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    return days[this.getDay()]
          +", "
          +this.getDate()
          +" "
          +months[this.getMonth()] 
          +" "
          +this.getFullYear();
};
2012-04-05 16:48
by Alexander
-1, does not format the dates as requested - James Hill 2012-04-05 16:59
I was just being lazy but I just added it - Alexander 2012-04-05 18:13


2

Here is my solution using Moment.js

Next 7 days

let days = [];
let daysRequired = 7

for (let i = 1; i <= daysRequired; i++) {
  days.push( moment().add(i, 'days').format('dddd, Do MMMM YYYY') )
}

console.log(days)
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

Just in case if you need previous 7 days

let days = [];
let daysRequired = 7

for (let i = daysRequired; i >= 1; i--) {
  days.push( moment().subtract(i, 'days').format('dddd, Do MMMM YYYY') )
}

console.log(days)
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

2017-08-17 18:22
by Syed


1

var feb22 = new Date(2012, 1, 22);
var feb23 = new Date(feb22.getTime() + 1000*60*60*24);

...and so on

2012-04-05 16:43
by Juan Mendes
-1, Nothing reusable here. What if he want's to change the date? Or reuse the function? Also doesn't format that date as requested (or at all) - James Hill 2012-04-05 16:57
@JamesHill I'm not going to do everything for someone who doesn't show any effort, but from your answer, it looks like you enjoy doing other people's jobs :) If the OP wants to change the date, my example shows that it's very easy to go form one date to another, let the OP do some learning on his own. Downvotes are for wrong answers, there is nothing wrong with my answer - Juan Mendes 2012-04-05 17:09
I understand and appreciate what you're saying about someone not showing effort. I chose to answer this question because I thought it was interesting. As for there being nothing wrong with your answer, I respectfully disagree, hence, the downvote. Since when are answers that don't answer questions acceptable on SO - James Hill 2012-04-05 17:11
@JamesHill I think you're feeding them instead of teaching them how to fish... Half of his question involves going from a starting date to the next day, and the next day... the other half is printing, I got him started with getting the next day, no need to downvote other answers just because you took the time to do a full writeu - Juan Mendes 2012-04-05 17:12
I don't want to get into a comment war, so this is my last remark. As I mentioned in my original comment, this is a poor way of progressing to the next day. The code is not reusable in any way. Why not put it in a function? When the OP wants to switch the calendar to next month, he'll have to rename all seven variables! What if he wants to display two weeks worth of dates? A function that you can pass parameters into is the only proper way of handling this - James Hill 2012-04-05 17:18
@JamesHill I leave it to the user to make the code reusable, I am just showing them how to get the next day, like I said previously, I'm not doing anybody else's job, just giving them enough pointers so they can proceed. Making a function out of my code is very very very simple. Look like you pissed off some people, because nobody is upvoting your answer... Let's fix tha - Juan Mendes 2012-04-05 17:26


1

You can set the variable dateString to whatever you want and in the loop you just increase the day. Then you will get the dates, but I think in a different format.

var dateString = '22 Feb 2012';
var actualDate = new Date(dateString);
var newDate;

for(var i=1; i<=7; i++){
 newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate()+i);
}
2012-04-05 16:46
by Daniel Blaichinger
-1, does not format the dates as requested - James Hill 2012-04-05 16:59
Normally he should read any documentation on the JS date object, like this: http://www.w3schools.com/jsref/jsrefobjdate.as - Daniel Blaichinger 2012-04-05 17:04
Or are you saying we actually should give him as much code as possible, so provide him with the complete calendar that he wants! - Daniel Blaichinger 2012-04-05 17:06
You can't post an incorrect answer and then say the person should read documentation to deduce the correct answer (especially when you don't even post a link to the documentation in your answer) - James Hill 2012-04-05 17:06
But I indicated in my answer that he will get probably a different format. In my opinion, if he is not able to search the web how to format a simple date, he should start learning JS from the beginning. But NOT here at stackoverflow.. - Daniel Blaichinger 2012-04-05 17:14
Actually, I do use JavaScript form time to time and can use the manual. What I couldn't do is to mix three things:

  1. Remember that months have different number of days.
  2. Start from any day I want
  3. Connect the days name with the date
  4. - z-x 2012-04-06 13:27


0

If you need next 7 weekdays starting from today

const isWeekday = (date) => {
 return date.weekday()!==0 && date.weekday()!==6
}

const weekdays=[];
let numberOfDaysRequired = 7
let addDaysBy = 1
moment.locale('en')
while(weekdays.length < numberOfDaysRequired)
{
  const d = moment().add(addDaysBy, 'days')
  if(isWeekday(d))
  {
   weekdays.push(d.format('dddd, Do MMMM YYYY'))
   
  }
  addDaysBy++;
}

console.log(weekdays)
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

2018-02-16 20:18
by Kumar
Ads