How can I update a date variable in an API URL query string

Question

I am using the fetch API to retrieve some JSON data from a server.

The fetch call looks something like this and relies on the current date in the query string to return the current date's data.

fetch(`https://www.some-url/apps/bookings/calendar-json.php?todayDate=${year}-${month}-${day}`)
  .then(r => r.json)... ``

The data returned is essentially showing the available bookings for the current date as set in the API url.

I want to have a set of controls that allows the user to increment or decrement the date by 1 day to show the bookings for that particular date by fetching the new data. To do this I was going to get the current date in ISO format (like below) then split up the year, month, day in to separate variables and use those in the API query string. -

const date = new Date();
const isoFormat = date.toISOString();
const currentDate = isoFormat.substr(0,10);

From there, is it then possible to manipulate the date variables via increment/decrement to get previous or next days dates in the API URL? I suppose a bit like a counter.

Or is there a better way that already exists for handling this? A package like moment.js or something?

You have to be careful about using `.toISOString()` because depending on your timezone, it may return a wrong date. Ie, it always returns the UTC date, so for instance `2021-09-27T01:00:00` in central european time (UTC+2) will become `2021-09-26:23:00:00Z` — derpirscher, Sep 27 '21 at 15:31

score 1 · Answer 1 · answered Sep 27 '21 at 15:48

1

If you want to increment/decrement the Date, it is easier to use a separate variable for, year, month and day :

let today = new Date();
let yyyy = today.getFullYear();
let mm = today.getMonth()+1; // getMonth() is zero-based
let dd  = today.getDate();

Or you can use directly the Date Object,

let offsetByDays = (24*60*60*1000) * 2; //2 days
let date= new Date();
date.setTime(date.getTime() - offsetByDays );
let formattedDate = date.toISOString().slice(0,10);

For moment.js see : momentJS date string add 5 days

NB: You have too take in consideration the timezone when using .toISOString().

answered Sep 27 '21 at 15:48

Zouhair Dre

558
4
14

Thanks for this, I think my issue with incrementing/decrementing is that I'm not sure if the Date API or Moment knows how many days are in each month, or how many months are in the year. So for eg. when incrementing beyond 30/31 days in a month, does the month increment the month by 1? Do I have to define that logic myself? – i-am-niall Sep 27 '21 at 17:28
1

Yes, the Date object can handle these situations. But again, be aware that depending on the timezone you are in, `toISOString` may be off one day ... – derpirscher Sep 28 '21 at 06:49
@i-am-niall if you used moment I'm sure if you added for example 30days to a date, it will increment the month if you reached the end of month, and the same goes for the year, manually, you should implement this yourself if you used the first approach by handling yyyy, mm, and dd separately – Zouhair Dre Sep 28 '21 at 09:02

score 0 · Accepted Answer · answered Nov 01 '21 at 12:20

I solved this by creating a set of controls to increment/decrement the date by a day. I used one of the answers above to help achieve this. Rather than split day, month, year in to their own variables, I kept it as one variable.

let date = new Date();
let today = date.setTime(date.getTime());
let day = 24 * 60 * 60 * 1000;
let dateVal;
let urlDate;

next.addEventListener("click", (e) => {
  dateVal = today += day;
  urlDate = new Date(dateVal);
  let formattedDate = urlDate.toISOString().slice(0, 10);
  console.log(formattedDate);
});

prev.addEventListener("click", (e) => {
  dateVal = today -= day;
  urlDate = new Date(dateVal);
  let formattedDate = urlDate.toISOString().slice(0, 10);
  console.log(formattedDate);
});

How can I update a date variable in an API URL query string

2 Answers2