How to display day of week / Time of day / open hours status?

Question

Trying to use HTML / JS to display something like this: It's Monday 11:03 AM — We are currently open

I have tried a few different things but, can only get this to work partially. I want to show weekday/time of day/ and if the shop is open or closed.

These would be the hours:

Monday 10 a.m. - 5 p.m.
Tuesday 12 - 7 p.m.
Wednesday 10 a.m. - 5 p.m.
Thursday 10 a.m. - 5 p.m.
Friday 10 a.m. - 5 p.m.
Saturday 10 a.m. - 2 p.m.
Sunday Closed

function getDayOfWeek(date) {
  const dayOfWeek = new Date(date).getDay();  
  var dateWithouthSecond = new Date();
dateWithouthSecond.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
  return isNaN(dayOfWeek) ? null : 
    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][dayOfWeek];
}

document.getElementById("demo").innerHTML = ( "It's  " + getDayOfWeek(Date.now()) );

Why not just use `toLocaleString` and pass in the `weekday` option? — Heretic Monkey, Nov 02 '20 at 17:56
Seems like one of these answers would get you pretty close to a solution: https://stackoverflow.com/questions/9081220/how-to-check-if-current-time-falls-within-a-specific-range-on-a-week-day-using-j — Marc, Nov 02 '20 at 17:59
hopefully you remember not everyone is in the same time zone — epascarello, Nov 02 '20 at 18:14
Yes I realize but for this particular case I am not worried about timezones — Abigail, Nov 02 '20 at 18:19

Mr. Polywhirl · Accepted Answer · 2020-11-02T18:29:15.017

As others have suggested, you could use Date.prototype.toLocaleString() and pass the weekday parameter to retrieve the day of the week.

const OperatingHours = {
  'Monday'    : { 'open': 10, 'close': 17 },
  'Tuesday'   : { 'open': 12, 'close': 19 },
  'Wednesday' : { 'open': 10, 'close': 17 },
  'Thursday'  : { 'open': 10, 'close': 17 },
  'Friday'    : { 'open': 10, 'close': 17 },
  'Saturday'  : { 'open': 10, 'close': 14 },
  'Sunday'    : { 'open':  1, 'close': -1 }
};

const greeting = (date) => {
  const now = new Date(),
    weekday = now.toLocaleString('en-us', { weekday: 'long' }),
    formattedTime = now.toLocaleTimeString('en-US',
      { hour: '2-digit', minute: '2-digit' }),
    currHour = now.getHours(),
    { open, close } = OperatingHours[weekday],
    isOpen = currHour >= open && currHour <= close;
  return isOpen
    ? `It's ${weekday} ${formattedTime} — we are currently open.`
    : `Sorry, it's ${weekday} ${formattedTime} — we are currently closed.`;
};

console.log(greeting(new Date()));

Marc · Answer 2 · 2020-11-02T18:28:29.000

Set up an object w/the hours you're open, and then compare like below. Note that Sunday is setup so there is no value that is in between.

const HOURS_OPEN = {
  "Monday": {"open": 10,"close": 16},
  "Tuesday": {"open": 12,"close": 18},
  "Wednesday": {"open": 10,"close": 16},
  "Thursday": {"open": 10,"close": 16},
  "Friday": {"open": 10,"close": 16},
  "Saturday": {"open": 10,"close": 13},
  "Sunday": {"open": 1,"close": -1}
}

let today = new Date();
let weekday = today.toLocaleString('en-us', {
  weekday: 'long'
});
let currentHour = today.getHours();
let open = HOURS_OPEN[weekday].open;
let close = HOURS_OPEN[weekday].close;

let statusString = "";
if (currentHour >= open && currentHour <= close) {
  statusString = `It's ${formatNow()}. We're open!`;
  console.log(statusString);
} else {
  statusString = `It's ${formatNow()}. Sorry, we're closed :(`;
  console.log(statusString);
}
document.getElementById("demo").innerText = statusString;

function formatNow() {
  let d = new Date();
  let min = d.getMinutes();
  let hr = d.getHours();
  let ampm = "AM"
  if (min < 10) {
    min = "0" + min;
  }
  if (hr > 12) {
    hr -= 12;
    ampm = "PM";
  }
  return (`${hr}:${min} ${ampm}`);
}

<div id="demo"></div>

This is helpful but I want it to display this way: "It's Monday 12:58 PM — we are currently open" — Abigail, Nov 02 '20 at 18:13
Yes! Almost exactly what I am trying to do, except I want it to show weekday also. (ex->Monday, Tuesday ..etc) If I add ${d} before the hours and minute in the return, it returns a very long date. I just want day of week. — Abigail, Nov 02 '20 at 18:32

How to display day of week / Time of day / open hours status?

2 Answers2