Ways to identify the image shown during operating hours?

I have previously asked this question and received helpful answers. Now, let's consider a business that operates from 9:00 AM to 5:00 PM PST time (California), closed on Saturdays and Sundays.

How can I make adjustments for this scenario?

The script below controls the display of an image based on the business hours. The image should show 'We're Open' at 9:00 AM PST and then change to 'We're Closed' at 5:00 PM. Any ideas on how to achieve this? Your input is appreciated!

Check out the reference Fiddle.

$(window).load(function(){
  // Translate your hours to UTC, example here is using
  // Central Standard Time (-0500 UTC)

  // Opening hour in UTC is 16, Closing hour is 0 the next day
  var d      = new Date(), 
      open   = new Date(), 
      closed = new Date();

  // Statically set UTC date for open
  open.setUTCHours(16);
  open.setUTCMinutes(0);
  open.setUTCSeconds(0);
  open.setUTCMilliseconds(0);

  // Statically Set UTC date for closing
  closed.setUTCDate(d.getUTCDate()+1); // UTC time rotates back to 0, add a day
  closed.setUTCHours(0); // UTC hours is 0
  closed.setUTCMinutes(0);
  closed.setUTCSeconds(0);
  closed.setUTCMilliseconds(0);

  // Debugging
  console.log("user's date:" + d);
  console.log("store open time in user's timezone:" + open);
  console.log("store close time in user's timezone:" + closed);
  console.log(d > open); // user's time is greater than opening time
  console.log(d < closed); // is user's time less than closing time
                           // (you don't have to go home...)

  // Test for store open?
  if (d > open && d < closed) {
    setOpenStatus(true);
  } else {
    setOpenStatus(false);
  }

  function setOpenStatus(isOpen) {
    $('#opend').toggle(isOpen);
    $('#closed').toggle(!isOpen);
  }
});​

EDITED/UPDATED SCRIPT

$(window).load(function(){
  // Translate your hours to UTC, example here is using
  // Central Standard Time (-0500 UTC)

  // Opening hour in UTC is 16, Closing hour is 0 the next day
  var d      = new Date(), 
      open   = new Date(), 
      closed = new Date();

  // Statically set UTC date for open
  open.setUTCHours(16);
  open.setUTCMinutes(0);
  open.setUTCSeconds(0);
  open.setUTCMilliseconds(0);

  // Statically Set UTC date for closing
  closed.setUTCDate(d.getUTCDate()+1); // UTC time rotates back to 0, add a day
  closed.setUTCHours(0); // UTC hours is 0
  closed.setUTCMinutes(0);
  closed.setUTCSeconds(0);
  closed.setUTCMilliseconds(0);

  // Debugging
  console.log("user's date:" + d);
  console.log("store open time in user's timezone:" + open);
  console.log("store close time in user's timezone:" + closed);
  console.log(d > open); // user's time is greater than opening time
  console.log(d < closed); // is user's time less than closing time
                           // (you don't have to go home...)

  // Test for store open?
  if (d > open && d < closed) {
    setOpenStatus(true);
  }
  if (d.getDay() !== 0 && d.getDay() !== 6 && (d > open && d < closed))
  else {
    setOpenStatus(false);
  }

  function setOpenStatus(isOpen) {
    $('#opend').toggle(isOpen);
    $('#closed').toggle(!isOpen);
  }
});​

Answer №1

Revise the last few lines to make it clearer.

if (d.getDay() !== 0 && d.getDay() !== 6 && (d >= open && d < closed)) {
    setOpenStatus(true);
} else {
    setOpenStatus(false);
}

To clarify the condition, if it is not Sunday (d.getDay() !== 0) or Saturday (d.getDay() !== 6), and the current time is after or equal to the opening time (d >= open) but before the closing time (d < closed), then set the status as "open"; otherwise (else), set it as "closed".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the dollar sign in Mootools to call elements with variables

I am facing an issue with modifying an element using Fx.Tween, but the problem lies in the fact that the element id is dynamically generated. This means I need to piece together the id from various variables. For example, in JavaScript: name = 'foo& ...

Tips for sending an icon as a prop in React components

I'm struggling to implement an icon as a prop while using props for "optionText" and "optionIcon". The optionText is working fine, but I'm facing issues with the OptionIcon. File where I'm creating props import Icon from ...

Unable to assign shader to OBJ file

Currently, I am encountering an issue with applying a new material shader (a basic normal map) to an OBJ model (a simple cube) in Three.js. Upon attempting to do so, I receive the following error message from Three.js: .WebGLRenderingContext: GL ERROR : ...

Insert the text into a table data cell once the drop-down selection has been changed

I am attempting to display my ajax results in the td element next to my dropdown menu that triggers the ajax call when changed. Each row contains a similar id where I intend for the text to be shown (I'm sure there is a simpler solution). Below is my ...

Adjusting the height of the navigation bar in BootStrap

I'm having trouble resizing the height of the navbar-default in this Bootstrap sample. It seems to be too big for my needs. Are there any Bootstrap classes I can use to adjust the height? For example: <form class="navbar-form navbar-left" role="s ...

Setting up Webpack and Babel for ReactJS development

Recently, I started delving into the world of ReactJS and stumbled upon a tool called webpack which acts as a module bundler. However, I've hit a roadblock while configuring it and keep encountering the following error message: ERROR in ./src/index. ...

Could JSON be improved for better space efficiency, or is this the standard format?

Within my code, I am using var team = <?php echo json_encode(get_results("SELECT id,name,title,bio,sord,picfn FROM mems ORDER BY sord")); ?>; This code generates a JavaScript array of objects like: var team = [{"id":"1","name":"somename1","title": ...

Issues with HTML5 drag and drop functionality seem to be causing problems

Check out this example I created: http://jsfiddle.net/NQQL6/ While dragging a link, the cart should turn green. Upon dragging the item over the cart, it should turn red. This functionality works fine when the cart is empty, but encounters issues otherwi ...

Trouble with $sce in Angular.js causing limitations on passing desired content into my directive

I've successfully developed a directive that animates a PNG Sequence. Everything functions perfectly when I manually input the image url, but when attempting to pass a dynamic url, I encounter an error related to $sce disallowing it. Below is the cod ...

Transform the infoBox into a jQuery dialog modal window

In this section, I have integrated a map with markers and infoBoxes. My goal now is to replace the infoBoxes with jquery dialog() and modal window functionalities. How can I achieve this effectively? Below is the code snippet that includes the implementat ...

Tracking activities in Laravel app---How to monitor actions

Is there a way to split the date and time onto one line in my script? I'm having trouble achieving this as shown here: Here is my current script: <div class="tab-pane active" id="tab_overview"> <div ...

Submit the form without displaying any output in the browser, not even in the view source code

I have a basic form that needs to be submitted multiple times, but I want the submission process to be hidden from the browser. Simply using "hidden" or "display:none" won't completely hide the form code when viewing the page source. I tried using PHP ...

The sliding content in the div below the one above it

Currently working on creating my portfolio website, and I have implemented a very dynamic parallax homepage with multiple layers. My goal is to enable one-page scrolling by using vh units. However, I encountered an issue where the div containing the abou ...

Library for JavaScript that enables incremental testing using regular expressions

Searching for a unique JavaScript library (preferably a node.js package) that has the ability to gradually check if a string meets a regular expression, character by character, and provide uncertain results. For instance, let's consider the following ...

Filter the array while maintaining its current structure

I'm struggling to create an array filter that can handle exact and partial data within a nested array structure. The challenge is maintaining the integrity of the top-level structure while filtering based on data in the second layer. Here's an ex ...

multiple file upload callback in express.js

As a novice in node.js & express.js, I am eager to upload multiple files and manipulate them later. However, I require a way to send a response (either ok or error status) only after all the files have been successfully saved on disk, or if any of them fai ...

Prevent the bootstrap collapse hide feature from functioning when content is already visible or expanded

I have a simple question. I would like to utilize the Bootstrap 3 collapse function to display some content, but without the ability to hide it when clicking on the link or button. Basically, I want the content to appear when clicking on the link or butto ...

Ways to horizontally align 2 rows in React

I am in the process of developing a react app and I have encountered an issue with aligning the field names horizontally with their corresponding field values in multiple columns. Despite my efforts, the alignment still appears to be a bit off. Below is th ...

Numerous Fascinating Challenges with React Native

Looking to share my React Native project and seeking help with some issues I'm facing. Despite multiple attempts, I have been unsuccessful in resolving them. Can anyone provide assistance? I have thoroughly searched Stack Overflow for similar questio ...

Using Typescript to import functions

TLDR - I need help understanding the difference between these imports in ReactJs using Typescript: setState1: (numbers: number[]) => void, setState2: Function Hello everyone, I've encountered some strange behavior when importing functions with Typ ...