Change the displayed date once a week using javascript

Question

I would like to show the date in an element on a web page, then once a week on a Saturday it will update to that Saturdays date, if the Saturday of the week hasn't been reached it will simply display the previous Saturdays date until the next Saturday.

I am able to get the date and to extract the day of the week, therefore i can identify when it is a Saturday. I have attempted to include an IF statement that will update the text when Saturday arrives. That seems to be working however I do not know how to keep it displaying the previous Saturdays date until it next updates?

HTML:

<div id="date">

</div>

JS:

var date = new Date(); //Gets current date
var day = date.getDay(); //Isolates what day it is

if (day === 6) {
  document.getElementById("date").innerHTML = date;
} else {
  //keep the previous saturday somehow? 
}

I have a JSFiddle with the code I have been practising with:

https://jsfiddle.net/Lime26/8txryo3k/13/

Seems to be working what I have so far, not sure how to get it to continue displaying the previous Saturdays date.

On a side note: to test this I have been manually changing the day integer between 0 and 6 to determine if it is working which it is.

I am attempting to set the date by entering 6, then I will enter a different number and in theory I would like it to not change (to check it I am watching the seconds and minutes expecting them to remain 'frozen') and then when I enter 6 again I expect it to change to the most current time.

So you need to round the current date to the last Saturday. Can you solve it? — GalAbra, Jul 20 '19 at 22:13
Possible duplicate of [Javascript: get Monday and Sunday of the previous week](https://stackoverflow.com/questions/13681702/javascript-get-monday-and-sunday-of-the-previous-week) — Herohtar, Jul 20 '19 at 22:40
Also related: https://stackoverflow.com/questions/35088088/javascript-for-getting-the-previous-monday They ask for a different day of the week, but the logic is the same. — Herohtar, Jul 20 '19 at 22:42
See [*get previous saturday's date and next friday's*](https://stackoverflow.com/questions/57019024/get-previous-saturdays-date-and-next-fridays). — RobG, Jul 20 '19 at 23:57

Nemer · Accepted Answer · 2019-07-20T22:47:49.463

2

this solution no need if condition:

var date = new Date(); //Gets current date

var day = date.getDay(); //Isolates what day it is

date.setDate(date.getDate() - (day+1) % 7 ); 
// day = 0 , (day+1) % 7 = 1
// day = 1 , (day+1) % 7 = 2
// .
// .
// day = 6 , (day+1) % 7 = 0 /here is sat


document.getElementById("date").innerHTML = date;

<div id="date"></div>

edited Jul 20 '19 at 22:47

answered Jul 20 '19 at 22:33

Nemer

667
1
6
10

Used this method and it worked great. Did a bit of testing too changing the date to a future date from this week and changing the day it was on and all worked really well (just for my own understanding of how this worked) Thanks very much for the help, very simple and concise solution! – Liam Jul 21 '19 at 10:29
the day value in any date in the future will be like 0>= day <= 6, 0 is Sunday and so on. Then in the 3rd line, you see we setDate to a new value: the actual date - (day+1) % 7. – Nemer Jul 21 '19 at 11:19

score 0 · Answer 2 · edited Jul 20 '19 at 23:54

0

This will do the trick.

I'm essentially converting the current time into a Unix timestamp (epoch time) and subtracting the number of days that have passed in seconds. This will give you back the same time but the date turned back.

var date = new Date();
var day = date.getDay();

if (day === 6) {
  document.getElementById("date").innerHTML = date;
} else {
  date.setTime(date.getTime() - (86400 * ((day % 6) + 1)));
  document.getElementById("date").innerHTML = date;
}

<span id="date"></span>

edited Jul 20 '19 at 23:54

RobG

142,382
31
172
209

answered Jul 20 '19 at 22:39

tripathiakshit

624
5
17

Not all days are 86,400 seconds long where daylight saving is observed, and ECMAScript time values are milliseconds, not seconds. I've edited your answer to insert the code as a runnable snippet so you can see the issues. – RobG Jul 20 '19 at 23:51

score 0 · Answer 3 · answered Jul 20 '19 at 23:19

0

This uses the MomentJS library. The library has additional formatting options, this is just one example.

const saturday = moment().day(6);
const saturdayFormatted = moment(saturday).format("ddd MM/DD/YYYY");

const prevSaturday = moment().day(13);
const prevSaturdayFormatted = moment(prevSaturday ).format("ddd MM/DD/YYYY");

const e1 = document.getElementById("id1").innerHTML = saturday;
const e2 = document.getElementById("id2").innerHTML = saturdayFormatted

const e3 = document.getElementById("id3").innerHTML = prevSaturday;
const e4 = document.getElementById("id4").innerHTML = prevSaturdayFormatted;

<script src="https://momentjs.com/downloads/moment.js"></script>

This Saturday (with and without formatting)
<ul>
  <li id="id1">one</li>
  <li id="id2">two</li>
</ul>

Next Saturday (with and without formatting)
<ul>
  <li id="id3">one</li>
  <li id="id4">two</li>
</ul>

answered Jul 20 '19 at 23:19

It'sNotMe

1,184
1
9
29

For me, "this Saturday" is next Saturday, and "next Saturday" is the following Saturday. An answer should not rely on a library that is not tagged or mentioned in the OP. – RobG Jul 20 '19 at 23:52
Technically "this Saturday" is the next Saturday coming up and "next Saturday is the Saturday that occurs in the next week which may or may not be "this Saturday". If you say next Saturday on a Sunday it is referring to this Saturday. – Adrian Brand Jul 21 '19 at 00:02
Actually seeing that Sunday is the first day of the week Saturday was a bad example to use, but it does apply for any other day of the week. – Adrian Brand Jul 21 '19 at 00:04
I'll leave it to the OP how to name variables. The semantic differences aren't relevant to the functionality of the code. If the OP indicates an outside library is off- limits, I'll be happy to remove the suggestion. – It'sNotMe Jul 21 '19 at 00:23

Change the displayed date once a week using javascript

3 Answers3