Parse time data from HTML using jQuery

Question

I've got a javascript widget on my page that outputs times for Sunrise and Sunset. The following code is what gets output (assume that these times change every day). I have no control over the output from the widget.

<div id="sun_container">
    <div class="details">
        Sunrise: <strong>7:00AM</strong> |
        Sunset: <strong>4:30PM</strong>
    </div>
</div>

Elsewhere on my page I have an image tag that looks like this:

<div id="sun_button">
    <img src="images/day.png">
</div>

I want to parse out the sunrise time and the sunset time and compare these against the current server time (which I can output via PHP if necessary).

If the current server time is not between the sunrise and sunset times, then I want to change the image src to "images/night.png".

Any ideas on how I could do this?

EDIT: I'm now outputting the server time in the page <head> using:

var server_time = "<?=date("H:i:s", time())?>";

which outputs something like this:

var server_time = "17:07:41";

Adam · Accepted Answer · 2010-12-08 22:15:23Z

3

You can do it very easily with the DateJS JavaScript library:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var sunrise = Date.parse($(".details strong:eq(0)").text());
 var sunset = Date.parse($(".details strong:eq(1)").text());
    if(Date.parse("" + server_time).between(sunrise, sunset)) { 
       $("img").attr("src","images/day.png")
    }
    else {
       $("img").attr("src","images/night.png")
    }
});
</script>

Try it here!

answered Dec 8, 2010 at 22:15

Adam

45.1k17 gold badges107 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WNRosenberg Over a year ago

I don't really mind that I had to include an extra JS library. This answer includes everything I needed to solve the problem.

Brad Christie Over a year ago

Once they're dates you can compare them easily using the built-in date properties.

Community · Accepted Answer · 2017-05-23 12:04:14Z

2

I think you're looking for this post: What is the best way to parse a time into a Date object from user input in Javascript?

Same premise, it's javascript, but this seems to be the best solution.

EDIT Also, see @Ender's solution on how to retrieve the data.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Dec 8, 2010 at 22:05

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

1 Comment

WNRosenberg Over a year ago

The post was helpful for parsing strings into dates, but didn't really help with the date comparison.

Ender · Accepted Answer · 2010-12-08 22:05:04Z

1

Well, you can get the sunrise/sunset times by doing something like the following:

var sunrise = $('#sun_container .details strong:eq(0)').text();
var sunset = $('#sun_container .details strong:eq(1)').text();

From there probably write the server time into a JS var, do your comparison, and then:

if (isNight) {
    $('#sun_button img').attr('src', 'images/night.png');
}

That should get you started.

answered Dec 8, 2010 at 22:05

Ender

15.3k8 gold badges38 silver badges51 bronze badges

1 Comment

WNRosenberg Over a year ago

This was great for getting me started, but didn't include any info on parsing the strings sunrise and sunset into Dates and comparing them.

Aaron D · Accepted Answer · 2010-12-08 22:40:51Z

Assuming you can generate a container like this with 24 hour time:

<div id="server_time">18:00</div>
<script>
$(function() {
// Assume server_time is 24hr
var server = new Date(Date.parse("2000-01-01 " + $('#server_time').text()));
var sunrise = $('#sun_container .details strong:eq(0)').first().text();
var sunset = $('#sun_container .details strong:eq(1)').last().text();

// strip off AM/PM
sunrise = sunrise.substring(0, sunrise.length-2);
sunset = sunset.substring(0, sunset.length-2);

// Parse to standard dates
sunrise = new Date(Date.parse("2000-01-01 " + sunrise)) ;
sunset = new Date(Date.parse("2000-01-01 " + sunset));
// Add tweleve hours to compensate for PM
sunset.setHours(sunset.getHours() + 12);

if (server < sunrise || server > sunset)
    $('#sun_button > img').attr('src', 'images/night');
});
</script>

Collectives™ on Stack Overflow

Parse time data from HTML using jQuery

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related