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

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>

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?

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>

Related

Why is this simple (nested) if statment not working?

I'm looking to achieve the following:
If it's Saturday or Sunday, show the we're closed page.
If it's not Saturday or Sunday:
.If it is outside of working hours (not between 9am and 12pm), show the we're closed page.
.If it is within working hours, show the we're open page.
Here is the code:
<html>
<head>
<TITLE>Golborne Patient Booking Portal </TITLE>
<script language="JavaScript" type="text/javascript">
function ampmRedirect() {
var currentTime = new Date();
var currentHour = currentTime.getHours();
var d = new Date();
var n = d.getDay();
if (n == 0) || (n == 6){ // if Saturday or Sunday
window.location.href = "closed.html"; // we are closed
} else { // if it is any other day
if ((currentHour < 8) || (currentHour > 11)) { // if outside of working hours (8am to noon)
window.location.href = "closed.html"; // we are closed
} else { // anything else (not weekday or within the times)
window.location.href = "open.html"; // we are open
}
}
}
</script>
</head>
<body onload="ampmRedirect()">
</body>
</html>
Where am I going wrong?
Beside the missing parenthese around the condition expression, you could take a single check with day and time and assign either a closing page or another target.
function ampmRedirect() {
var date = new Date(),
time = date.getHours(),
day = date.getDay();
window.location.href = day === 0 || day === 6 || time < 8 || time > 11
? "closed.html"
: "https://golborne.abtrace-cloud.com";
}
<body onload="ampmRedirect()">

Script to open URL only on first Friday of the month and between 8am-10am

I'm working in Virtual Tour Software with Javascript and want to make an action, which will open an URL (with photo panorama) ONLY in particular part of time (in that case it's first Friday of month and only between 8am and 10am). Any ideas? Thanks Michal
For now I got somethink like this:
var startDate = new Date('Jun 5, 2020 8:00:00').getTime();
var endDate = new Date('Jun 5, 2020 10:00:00').getTime();
setInterval(function() {
var now = new Date().getTime();
var visible = now > startDate && now < endDate;
var hotspot = this.getPanoramaOverlayByName(this.getMediaByName('Panorama'), 'Hotspot');
if(hotspot && hotspot.get('enabled') != visible)
hotspot.set('enabled', visible);
}.bind(this), 1000);`
The problem is that I need to change "var start" and "var end" every time. I want to make it visible on every First Friday of month.
you can use getday() and getdate() function in js to find the day which is friday and date which is less or equal to 7 whatever the month and year is.
you can add following in your code like this:
var d = new Date();
var startDate = d.getDate(); // this will gives you only date
var isFriday = d.getDay(); // this will gives index of the day
var n = d.getHours(); // add this new line gethours
if((startDate <= 7 && isFriday == 5) && (n >= 8 && n <= 10)) // as indexing 5 for friday
{
setInterval(function() {
var hotspot = this.getPanoramaOverlayByName(this.getMediaByName('Panorama'), 'Hotspot');
if(hotspot && hotspot.get('enabled') != true)
hotspot.set('enabled', true);
}.bind(this), 1000);
}
try this.

Using JQuery to show/hide div based on month and date range

I'm new to learning JQuery and I am trying to write a script that will only display text inside a div after May 1 and before June 1. This needs to ignore the year and only show the dive between these limits. Here is what I've been experimenting with:
<script type="text/javascript">
var today = new Date();
//month begins with 0
if ((today.getMonth() > 04 && today.getDate() > 01) || (today.getMonth() < 05 && today.getDate() < 01)){
$('#cellOne').show();
}
else {
$('#cellOne').hide();
}
</script>
Since today is not between these limits, I believe the div should be hidden, but I can't get it to work. Can anyone put me on the right path here? It is possible I have a logic error as I'm not very experience with JavaScript and JQuery. Much obliged.
For this particular situation, calculating the day of the year is not an ideal solution, mostly because when I hand the website back over to daily administrators they will not understand how to update the code.
Here is the answer I came up with, following the lead of #Alex
It seems to work and thought it might be useful to someone else.
$(document).ready(() => {
// MM - DD - YYYY
function getDayFromDate(dateString) {
var now = new Date(dateString);
var start = new Date(now.getFullYear(), 0, 0);
var diff = now - start;
var oneDay = 1000 * 60 * 60 * 24;
return Math.floor(diff / oneDay);
}
let cutoffLow = getDayFromDate("05/01");
let cutoffHigh = getDayFromDate("06/01");
let now = getDayFromDate(new Date());
if(now > cutoffLow && now < cutoffHigh) {
document.querySelector('#cellOne').style.display = "";
}
else{
document.querySelector('#cellOne').style.display = "none";
}
});

show/hide div during business hours, mix with UTC?

UPDATE
I have added a current working fiddle, I feel like it should be correct, but it doesn't seem to work.
https://jsfiddle.net/bill9000/yadk6sja/2/
original question:
what I have is some code to show/hide div (basically show div during certain business hours) - is there an easy way to make this use a calculate from UTC... so that the show/hide time is fixed on a certain timezone. eg. 6pm EST instead of 6pm users time... here's my current code:
var d = new Date();
var dayOfWeek = d.getDay();
var hour = d.getHours();
var mins = d.getMinutes();
var status = 'open';
if (dayOfWeek !== 6 && dayOfWeek !== 0 && hour >= 03 && hour < 15){
//if (hour=='10' && mins < '30'){
// status = 'closed';
// }else{
status = 'open';
// }
}else{
status = 'closed';
if (status=='open') {
$b('.orderby').show();
}else{
$b('.orderby').hide();
}
also, I have some other JavaScript that's getting the UTC diff:
function ShowTime() {
var now = new Date();
var diff = now.getTimezoneOffset() / 60; //the difference between local PC and UTC
diff = diff - 4; //the difference between UTC and EST
var hrs = 18-(now.getHours()+diff); //18 is the target hour
any way of making the show/hide work for the specific time?
Date() objects are already UTC, when you use d.getDay() or d.getHours(), the local timezone is applied on the fly.
You just have to use d.getUTCDay(), d.getUTCHours(), etc. to prevent this

How to detect the user's locale date and time format

Is there a possibility to determine, with pure Javascript, what date time FORMAT has user configured on his operating system (Windows, Linux, MAC OS, etc.)?
Thanks in advance.
EDIT: I know about the method toLocaleString(), but this isn't help me to get the format that client has configured on his local machine.
I wrote something in pure javascript that works in IE/Firefox/Chrome. It will out put MM/DD/YYYY or DD/MM/YYYY,... depending in toLocalDateString().
Did not work on Safari but new Date().toLocalDateString() did not either.
Here is a jsFiddle
//Create a known date string
var y = new Date(2013, 9, 25);
var lds = y.toLocaleDateString();
//search for the position of the year, day, and month
var yPosi = lds.search("2013");
var dPosi = lds.search("25");
var mPosi = lds.search("10");
//Sometimes the month is displayed by the month name so guess where it is
if(mPosi == -1)
{
mPosi = lds.search("9");
if(mPosi == -1)
{
//if the year and day are not first then maybe month is first
if(yPosi != 0 && dPosi != 0)
{
mPosi = 0;
}
//if year and day are not last then maybe month is last
else if((yPosi+4 < lds.length) && (dPosi+2 < lds.length)){
mPosi = Infinity;
}
//otherwist is in the middle
else if(yPosi < dPosi){
mPosi = ((dPosi - yPosi)/2) + yPosi;
}else if(dPosi < yPosi){
mPosi = ((yPosi - dPosi)/2) + dPosi;
}
}
}
var formatString="";
var order = [yPosi, dPosi, mPosi];
order.sort(function(a,b){return a-b});
for(i=0; i < order.length; i++)
{
if(order[i] == yPosi)
{
formatString += "YYYY/";
}else if(order[i] == dPosi){
formatString += "DD/";
}else if(order[i] == mPosi){
formatString += "MM/";
}
}
formatString = formatString.substring(0, formatString.length-1);
$('#timeformat').html(formatString+" "+lds);
Here's an idea, that may or may not work.
Create a date where all the elements are distinct, like February 18th 1999 at 13:45, use toLocaleString(), then identify the elements based on their distinct values.
Could be kind of complicated and I don't have any code that might help with it, but it's an idea to be thrown out there, maybe you can make use of it.
EDIT: Here's some code:
var d = new Date(1999,1,18,13,45,0).toLocaleString();
document.write("<p>String: "+d+"</p>");
var f = d
.replace(/1999/,"%Y")
.replace(/99/,"%y")
.replace(/F[^ ]{3,}/i,"%M")
.replace(/F[^ ]+/i,"%m")
.replace(/PM/,"%A")
.replace(/pm/,"%a")
.replace(/18[^ ]+/,"%d%S") // day number with suffix
.replace(/18/,"%d")
.replace(/13/,"%H")
.replace(/1/,"%h")
.replace(/45/,"%i")
.replace(/00/,"%s");
// optionally add something to detect the day of the week (Thursday, here)
document.write("<p>Format: "+f+"</p>");
Output:
String: 18 February 1999 13:45:00
Format: %d %M %Y %H:%i:%s
Something like this ?
<script type="text/javascript">
var d=new Date();
document.write("Original form: ");
document.write(d + "<br />");
document.write("Formatted form: ");
document.write(d.toLocaleString());
//calculate change of the 2 dates
</script>

Categories

Resources