I need a button to only during a certain time at certain days

Question

I need a button to only appear from 12pm-3pm on Monday-Friday. When it is not during those times, the item (button) needs to not be shown. We also need to account the different time zones for people who will be viewing the site. Any help would be greatly appreciated

My code right now only disables the button during 12pm-3pm. I have not been able to input for it to only work on certain days. Also, I think the time only accounts for the server's time zone (Pacific Standard) and not the user's.

<a href="#" target="_blank"><input id="live" class="bttHider live" 
type="submit" onclick="showHidden(); showbttHidden();" 
value="Livestream Video - STREAMING NOW" disabled></a>

<script>
var h = new Date().getHours();

if (h >= 12 && h <= 15) {

document.getElementById('live').disabled=false;
}
</script>

"Also, I think the time only accounts for the server's time zone (Pacific Standard) and not the user's." It's the other way around; you're running the code on the client, so the time zone is also theirs. — Luca Kiebel, Jun 01 '19 at 08:22
Don't display from the server side because js can be alerted from the client side. — Rajendran Nadar, Jun 01 '19 at 08:22
Try to look at this question for getting an absolute timezone https://stackoverflow.com/questions/8805613/javascript-countdown-using-absolute-timezone, and then use this as a condition on when to display your button. — JohnDoe, Jun 01 '19 at 08:40

score 0 · Answer 1 · answered Jun 01 '19 at 08:29

var today = new Date();
  var day = today.getDay();
  var daylist = ["Sunday","Monday","Tuesday","Wednesday ","Thursday","Friday","Saturday"];
  console.log("Today is : " + daylist[day] + ".");
  if(daylist[day]!="" && daylist[day]!="Sunday"){
  var hour = today.getHours();
  var minute = today.getMinutes();
  var second = today.getSeconds();
  if(hour>="12" && (hour<=3&&minute==0)){
  $("#btn1").show();}
  else{$("#btn1").hide()}
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button Styles</h2>
  <button type="button" class="btn btn-info" id=btn1>Basic</button></div></body></html>

I need a button to only during a certain time at certain days

1 Answers1