CODEWITHSUNDEEP
javascriptjquerydate
chitown
chitown

Reputation: 5

using JS to return date of next specific day of week, but getting undesired results

I have a JS script that fetches the dates of the upcoming Tuesday and Thursday, but noticed today that the Thursday date is way off. I think it has to do with being close to the end of the month of June, but am not sure how to fix. Any ideas?

Current result:

Tuesday, June 30th

Thursday, March 10th

Expected result:

Tuesday, June 30th

Thursday, July 2nd

https://jsfiddle.net/oneelement/pf8gon8w/

var today = new Date();
var dayOfWeek = today.getDay();
var month = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'];

function getNextDate(d) {
    var date = today.getDate();
    while (today.getDay() !== d) {
        today.setDate(++date);
    }
    return today;
}

var getOrdinal = function (n) {
    var s = ["th", "st", "nd", "rd"],
        v = n % 100;
    return n + (s[(v - 20) % 10] || s[v] || s[0]);
}; // credit: http://forums.shopify.com/categories/2/posts/29259

var tueDate = getNextDate(2);
tueDate = 'Tuesday, ' + month[tueDate.getMonth()] + ' ' + getOrdinal(tueDate.getDate());
var thuDate = getNextDate(4);
thuDate = 'Thursday, ' + month[thuDate.getMonth()] + ' ' + getOrdinal(thuDate.getDate());

if (dayOfWeek < 3 || dayOfWeek > 4) {
    $('#event1').html(tueDate);
    $('#event2').html(thuDate);
} else {
    $('#event1').html(thuDate);
    $('#event2').html(tueDate);
}

Upvotes: 0

Views: 54

Answers (2)

depperm
depperm

Reputation: 10746

I would change the way you're getting the dates, I would send two params. The first is if its the first date or second, the next is the date you want (mon, tue, etc). Like so:

function getNextDate(i,d) {
  if(i==1){
    if(today.getDay()==d)
        return today;
    else{
        var tue=today;
        while(tue.getDay()!=d){
            tue.setDate(tue.getDate() + 1);
        }
        return tue;
    }
  }else{
        var thur=today;
        thur.setDate(thur.getDate() + 1);
        while(thur.getDay()!=d){
            thur.setDate(thur.getDate() + 1);
        }
        return thur;
  }
}

Here is a fiddle

Upvotes: 0

JJJ
JJJ

Reputation: 33163

Today var date = today.getDate(); returns 30. Doing today.setDate(++date); sets the day to 31, which the date object correctly interprets as July 1st.

But now in the next iteration you're increasing the original day, which becomes 32. Setting the day for July 1st to 32 results in "July 32nd" i.e. August 1st. Next it makes "August 33rd" which is September 2nd and so on. It continues until it happens to land on a Thursday which is March 10th the next year.

What you'll have to do is refresh the day every time in the loop so that it'll correctly go back to 1 when the month changes.

var date; 
while (today.getDay() !== d) {
    date = today.getDate();
    today.setDate(++date);
}


var today = new Date();
var dayOfWeek = today.getDay();
var month = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'];

function getNextDate(d) {
    var date; 
    while (today.getDay() !== d) {
        date = today.getDate();
        today.setDate(++date);
    }
    var getOrdinal = function (d) {
        var s = ["th", "st", "nd", "rd"],
            v = n % 100;
        return n + (s[(v - 20) % 10] || s[v] || s[0]);
    };
    return today;
}

var getOrdinal = function (n) {
    var s = ["th", "st", "nd", "rd"],
        v = n % 100;
    return n + (s[(v - 20) % 10] || s[v] || s[0]);
}; // credit: http://forums.shopify.com/categories/2/posts/29259

var tueDate = getNextDate(2);
tueDate = 'Tuesday, ' + month[tueDate.getMonth()] + ' ' + getOrdinal(tueDate.getDate());
var thuDate = getNextDate(4);
thuDate = 'Thursday, ' + month[thuDate.getMonth()] + ' ' + getOrdinal(thuDate.getDate());

if (dayOfWeek < 3 || dayOfWeek > 4) {
    $('#event1').html(tueDate);
    $('#event2').html(thuDate);
} else {
    $('#event1').html(thuDate);
    $('#event2').html(tueDate);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="event1">event 1</p>
<p id="event2">event 2</p>

Upvotes: 2

Related Questions