CODEWITHSUNDEEP
javascriptphp
action jack
action jack

Reputation: 53

Javascript display based on Date

I have a page that already has a call to an SQL database, and I want to display a div based on a condition on one of the entries. I can't quite get this to work for me though, and I'm struggling to find the right answer. I want a Div called #expiryDate to display with JavaScript if the expiry date column entry on the database, is a month away.

I can display the db entry with <?php echo $data["expires"]; ?> But I want to do something like this....

<script type="text/javascript">
  $function() {
    var subval;
    subval = $data["expires"];

    if(..........) {
      $('#expiryDate').show();
    } else {
      $('#expiryDate').hide();
    }
  }};
</script>

But I can't work out the if bit. I want it to be If the date in $date["expires"] is a month away then.... What am I missing?

Upvotes: 0

Views: 523

Answers (3)

sebbzzz
sebbzzz

Reputation: 471

Demo: http://jsfiddle.net/Lts1rg18/

Assuming $data["expires"] is a date string;

 var expDate = new Date(<?php echo "$data['expires']"; ?>);
 var now = new Date();
 var oneMonthFromNow = new Date(now.getFullYear(), now.getMonth() + 1, now.getDate());

 if(expDate <= oneMonthFromNow) {
   $('#expiryDate').show();
 } else {
   $('#expiryDate').hide();
 }

Upvotes: 2

Simon
Simon

Reputation: 1004

If possible, perform the calculations within PHP to avoid putting pressure on the clients browser.

I like Sebbzzz answer but, personal preference sees my time calculations happen in timestamps so:

<?php
$strExpiryTimestamp = strtotime($date["expires"]);

/* For mockup purposes */
$intMonth = 1; /* date('n') Gets this month */
$intYear = 2014; /* date('Y') Gets this year */
$intStartOfMonth = mktime(0, 0, 0, $intMonth, 1, $intYear);

if($strExpiryTimestamp < $intStartOfMonth) {
    $strOp = 'show';
} else {
    $strOp = 'hide';
}
?>

<html>
    <body>
        <h1>Your HTML</h1>
        <script>
        $(document).ready(function () {
            $('#expiryDate').<?php echo $strOp; ?>();
        });
        </script>
    </body>
</html>

Using the above approach, you can clearly see that the calculations are performed "on top" at the server and then the script part can be included wherever you please so long as $strOp is available as a variable.

If you want to find out some more information on date, check out the PHP manual page here

Upvotes: 1

jiy
jiy

Reputation: 868

I would suggest adding moment.js to your project and try something like this:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/moment.js"></script>
</head>

And then the following jQuery:

$(document).ready(function () {
    expiryDate();
});

function expiryDate() {
    var dbDate = $data["expires"];
    var expDate = moment(dbDate).format();
    var curDate = moment().format();
    var oneb4 = moment(expDate).subtract(1, 'months').format();

    if (curDate > oneb4) {
        $('#expiryDate').show();
    } else {
        $('#expiryDate').hide();
    }
}

Upvotes: 1

Related Questions