CODEWITHSUNDEEP
javascripthtmldatetime
Peta Reardon
Peta Reardon

Reputation: 61

Show div based on getDay and getHours + getMinutes

I am building a website for a radio station and want to show which presenter is currently on air. I have built a web app that contains data on the presenter: name, photo, bio and start/end times for each weekday.

<div id="presenter1">
    <div class="slot">
        <div id="sunday-off"> - </div>
        <div id="monday-afternoon">12:00 - 15:59</div>
        <div id="tuesday-afternoon">12:00 - 15:59</div>
        <div id="wednesday-afternoon">12:00 - 15:59</div>
        <div id="thursday-afternoon">12:00 - 15:59</div>
        <div id="friday-afternoon">12:00 - 15:59</div>
        <div id="saturday-morning">06:00 - 08:59</div>
    </div>
</div>

What I would like to do is use Javascript functions getDay() and getHours() + getMinutes() to show only the presenter that is scheduled to be on air based on the times specified in the app.

The main part I am having difficulty with is with determining whether this presenter falls within the current time and then showing/hiding the div as necessary.

Any help or guidance on how I can acheive this would be greatly appreciated.

Upvotes: 2

Views: 1526

Answers (2)

fedmich
fedmich

Reputation: 5381

If you already are using jQuery library. I'll suggest you use a date library for easier to read code and a bit more maintainable too http://archive.plugins.jquery.com/project/jquery-dateFormat

timenow = $.format.date( new Date(), 'ddd h:mm a')
// returns Monday 6:22 AM

switch(timenow){
case 'Monday 1:00 PM':
    //do something
    break;
case 'Tuesday 3:00 PM':
    //do something
    break;
}

then if it's always within the hour, just ommit the minutes. use the format 'ddd h a' So you could write your JavaScript with a SWITCH

timenow = $.format.date( new Date(), 'ddd h a')
// returns Monday 6 AM

switch(timenow){
case 'Monday 1 PM':
case 'Monday 2 PM':
    //do something
    break;
case 'Tuesday 3 PM':
    //do something
    break;
}

but if you're not using jquery, and you want to just use getDay(), plain javascript

var days =["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var d = new Date();
var hr = d.getHours() % 12;

timenow = days[d.getDay()] + ' ' + hr + (d.getHours() > 12?'PM':'AM')

// returns "Monday 2PM"

things to note: to fetch your current presenters via AJAX to handle the DB

Upvotes: 0

Nick Kitto
Nick Kitto

Reputation: 6099

You can just compare with the getHours and getDay function as follows, you don't have to worry about the minutes function as they all sit on the boundaries of hours. Just remember that day is 0 indexed from Sunday

//Hide all the divs up here
var d = new Date();
var weekday = d.getDay();
var hours = d.getHours();
//    between 12 and 6pm           From monday  to friday
if (hours >= 12 && hours < 18 && weekday > 0 && weekday < 6) {
   switch(weekday) {
      case 1:
          //Show monday
          break;
      case 2:
          //Show tuesday
          break;
      case 3:
          //Show wed
          break;
      case 4:
          //Show thur
          break;
      case 5:
          //Show fri
          break;
    }
//          Saturday         between 6 and 9
} else if (weekday == 6 && hours >=6 && hours < 9) {
  //Show saturday
} else if (weekday == 0) {
  //Show sunday
}

Edit: as per your request heres a simple modular implementation

var schedule = [
    {"starthour":12, "endhour":18, "weekday":1, "div":"div1"},
    {"starthour":18, "endhour":20, "weekday":1, "div":"div2"}
]
var d = new Date();
var weekday = d.getDay();
var hours = d.getHours();
var i;
for (i = 0; i < schedule.length; i++) {
    if (schedule[i].starthour >= hours && schedule[i].endhour < hours && schedule[i].weekday == weekday) {
        //Show schedule[i].div
    }
}

Upvotes: 2

Related Questions