I at the moment have the day values as strings. (e.g. "monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday") but no date.
The days describe opening hours of a shop and I would like to translate these string values dynamically based of the locale set on the shop.
I noticed that JS have the wonderful method Date.prototype.toLocaleDateString() but it doesn't seem like that I can get the localized string without providing a date. How would you go about this?
Have a look at Date.prototype.getDay
const weekdays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const date = new Date();
// get first day of week, and then add the weekday
let day = date.getDate() - date.getDay() + weekdays.indexOf("Saturday");
date.setDate(day)
console.log(date.toString());
You can use the Date() perhaps
// current date
let date = new Date();
Additionally, we can get a day of week:
getDay()
Get the day of week, from 0 (Sunday) to 6 (Saturday).
When using the Date() method you can also check for year, month, day and time. Maybe if you want to check so that it´s not on christmas day or after closing hours etc. Should work fine!
Methods:
getFullYear()
Get the year (4 digits)
getMonth()
Get the month, from 0 to 11.
getDate()
Get the day of month, from 1 to 31, the name of the method does look a little bit strange.
getHours(), getMinutes(), getSeconds(), getMilliseconds()
Get the corresponding time components.
Just create a new date object pointing to any Monday, then add days consecutively while calling date.ToLocaleDateString(LOC, {weekday: 'long'}), replace LOC with any locale you wish to use, to define in which language you'd like to get the week names.
function listDayNames(elem, locale)
{
let e = document.getElementById(elem);
let date = new Date('2022/08/22');
for(let i=0;i<=6;i++) {
e.innerHTML += date.toLocaleDateString(locale, { weekday: 'long' }) + '<br>';
date.setDate(date.getDate() + 1);
}
e.innerHTML += '<hr>';
}
let date = new Date();
listDayNames('days', 'en-US');
listDayNames('days', 'de-DE');
<p id="days"></p>