0

For JS ninjas this could be basic JS programming but I'm not sure how to attack it since I am a Javascript/jQuery noob.

I would like to show a div based on todays date.

Logic is something like this:

Check todays date and if todays date is 30 days or more from span.job-date then show div.message. Additionally I would like to insert the number of days old into the message in the div. (In this example the message would be shown).

<span class="job-date">1-14-2013</span>

<div class="message">This job is XX days old it may no longer be available</div>

Thanks!

Mark Mitchell
  • 2,157
  • 4
  • 16
  • 15

3 Answers3

1

This should help. You can use this function to determine the difference in days between a past date and today:

function getDaysOld(date) {
  // Get difference in days from ms and floor result
  return 0|(new Date() - date) * 1.16e-8;
}

You can use it like so:

if (getDaysOld(new Date('1-14-2013')) >= 30) {
  ...
}

You can extract the text from your span with jQuery and use this function to show/hide the div when needed.

elclanrs
  • 92,861
  • 21
  • 134
  • 171
1

JS:

$(function() {
  var jobDateText = $(".job-date").html()
    , jobDate = new Date(jobDateText)
    , today = new Date()
    , thirtyDaysInMS = 30 * 24 * 60 * 60 * 1000
    , differenceInMS = Math.abs(today - jobDate)
    , differenceInDays = Math.floor(differenceInMS / 1000 / 60 / 60 / 24);

  if (differenceInMS > thirtyDaysInMS) $(".message").show();
  $("span.daysOld").html(differenceInDays);
});

HTML:

    <span class="job-date">1-20-2013</span>

    <div class="message">This job is <span class="daysOld"></span> days old, and it may no longer be available</div>

CSS:

.message {
  display:none;
}

AngularJS is a really good alternative to jQuery for stuff like this. All you would have to do in AngularJS is set a variable in the controller scope called something like $scope.stale = true and $scope.daysOld based on the date math and then in your html simply 

<div class="message" ng-show="stale">This job is {{daysOld}} days old it may no longer be available</div>
tjb1982
  • 2,257
  • 2
  • 26
  • 39
  • tjb1982 Thanks! Worked like a charm and thanks for the note about AngularJS. I have heard of it but have not looked at it closely yet. I am just getting going with Javascript but still suck at it. Do you know of any good resources to get started with the basics? Most of the stuff I have found so far get really deep really fast. Thanks again for your help! – Mark Mitchell Mar 03 '13 at 18:39
  • I don't know of any one source that would be best for you to turn to. JavaScript has lots of expressive power and it takes a lot to learn all of the intricacies of it. Like anything else, you just need to put in the time, unfortunately. As you solve individual problems by googling, you'll see strange and interesting looking solutions which will teach you what's possible. My example above was meant to break the problem down simply, but if you look at the other answers here, you'll find that in the end they are better solutions. E.g. abstracting the date math out with `getDaysOld(date)` is – tjb1982 Mar 06 '13 at 18:04
  • (cont.) a great way to reuse this functionality, obviously, but the particular expression @elclanrs used is a little opaque to a beginner, I would think. The `|` character is a [bitwise OR](http://stackoverflow.com/questions/6194950/what-does-the-single-pipe-do-in-javascript) and he's using scientific notation for a single day in milleseconds, but it works and it's elegant. @Valera is also right that you shouldn't get data from the presentation like that, but rather as an attribute or hidden input, etc. because you want to be able to change the format later. – tjb1982 Mar 06 '13 at 18:11
0

Assuming you're using jQuery, here's a jsFiddle for you: http://jsfiddle.net/Pb3bm/

Though, in your job-date class, I would suggest you store the date in milliseconds as a parameter, like so:

<span class="job-date" datems="1358139600000">1-14-2013</span>

This way you don't have to worry about the format your date is displayed in.

Val Schuman
  • 1,798
  • 2
  • 18
  • 23