How do I change a picture during the weekends with javascript?

Question

I want to show on our site when the chat is available. The problem is that it won't be open in the weekends. How do I exclude them? Can it be done?

<html>
<body>
<script type="text/javascript">
function chatonoff(){
var now = new Date();
var hour = now.getHours();

if (hour >=9 && hour <=18)
{
document.getElementById("chat").src = "/bilder/butik/chat-open.png";
}
}
</script>
<img id="chat" src="/bilder/butik/chat.png" onload="chatonoff()">

</body>
</html>

yes, it can be done, but you at least need to take time zones into account - your server time may not be in the same time zone as the browser displaying your html — radai, Jan 11 '13 at 07:24
@radai s/need to/shoud/; I've seen quite a few apps where a new day starts at 7 AM GMT (9 AM CEST). — John Dvorak, Jan 11 '13 at 07:26
...but shouldn't the chat availability graphic respond to whether or not the chat user is available? What chat software are you using - there may be a simple api. — Popnoodles, Jan 11 '13 at 07:41

score 2 · Accepted Answer · edited May 23 '17 at 10:24

2

You could do like this

function chatonoff(){
    var now = new Date();
    var hour = now.getHours();
    var day = now.getDay();

    //Check if weekend : in this case, I assume that saturday == 6 and Sunday = 0
    //It depends on your location / timezone
    if(day != 6 && day != 0)
    {
        if (hour >=9 && hour <=18)
        {
            document.getElementById("chat").src = "/bilder/butik/chat-open.png";
        }
    }
}

EDIT

About excluding hollidays :

You should create an array with all the off dates. Then, check if the curent day is present in the array

  var offDaysListArray = ['2013-01-01','2013-01-02'];

  var now = new Date();
  var y = now .getFullYear();
  var d = (now .getDate() < 10) ? '0'+now .getDate() : now .getDate();
  var m = ((now .getMonth()+1) < 10) ? '0'+(now .getMonth()+1) : (now .getMonth()+1);

  //Check if it is a closed day
  if(offDaysListArray.indexOf(y + '-' + m + '-' + d) != -1)    
      return false; //It is a close day

Be carefull with indexOf, old browser like IE8 doesn't implement this function. Check Why doesn't indexOf work on an array IE8?

edited May 23 '17 at 10:24

Community

1
1

answered Jan 11 '13 at 07:28

sdespont

13,915
9
56
97

you could cache `now.getDay()`; `now.hetHours()` is already cached. – John Dvorak Jan 11 '13 at 07:29
@radai `new Date()` is always TZ-aware. do you want otherwise? – John Dvorak Jan 11 '13 at 07:32
i meant something like declare var serverOffset = [server-generated const]; and then adjust the calculation to check if its a working day @server location – radai Jan 11 '13 at 07:38
Thank you! This pulled the job! My next headache will probably be to exclude holidays. I assume that I will have to exclude those manually? – André Ihlar Jan 11 '13 at 09:20
I added some tips about excluding hollidays in my answer – sdespont Jan 11 '13 at 09:31

score 2 · Answer 2 · answered Jan 11 '13 at 07:29

This is a very simple answer, although it won't exactly work as you want it to as JavaScript is run on the client side.

This means that someone on the other side of the world will be able to see your chat on HIS FRIDAY even though it is a SATURDAY for YOU (A Sunday/Monday example also works here). Ideally you would solve this by using some server side language such as Java / .NET / PHP or whatever you are using.

Here is your quick JavaScript fix:

    <html>
    <body>
        <script type="text/javascript">
        function chatonoff(){
            var now = new Date();
            var hour = now.getHours();
            var day = now.getDay();
            if (hour >=9 && hour <=18 && day >= 1 && day <= 5)
            {
                document.getElementById("chat").src = "/bilder/butik/chat-open.png";
            }
        }
        </script>
        <img id="chat" src="/bilder/butik/chat.png" onload="chatonoff()">
    </body>
    </html>

Good answer. Thank's alot. I went with the one from sdespont, since I saw that one first. This is a bit shorter though. — André Ihlar, Jan 11 '13 at 10:00
No worries, glad I could help! I kept the code as similar to how you had it before, that's about it. :) — Sanchit, Jan 11 '13 at 10:25

How do I change a picture during the weekends with javascript?

2 Answers2