Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML how do I insert dynamic date in webpage

I have a static webpage, nothing changes dynamically. However the client wants a date insert into text within the page. The date will always be the current daet plus one day. how do I do that?

like image 477
mattgcon Avatar asked Feb 05 '11 02:02

mattgcon


6 Answers

Use JavaScript and insert the date onLoad.

Take a look here for a working example: http://jsfiddle.net/xGDvp/

This will update the date as follows: February 5, 2011

Your HTML:

<span id="spanDate"></span>

Your Javascript

    <script type="text/javascript">
           var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];       
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (1000*3600*24));       
document.getElementById("spanDate").innerHTML = months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
    </script>
like image 177
NakedBrunch Avatar answered Nov 01 '22 10:11

NakedBrunch


Downvoters: Note that the tag "javascript" was added after this answer was given.

You could use Server Side Includes (SSI), if your server supports them.

If your server is Apache, you could, for example, put the following element into your HTML page to output a current date + 1 day:

<pre>
<!--#exec cmd="date -v +1d '+DATE: %Y-%m-%d'" -->
</pre>

Assuming today is 2011-02-05, you'll have the following output on your page in browser:

...
DATE: 2011-02-06
...

To output the full weekday name, you can use date -v +1d '+DATE: %A %d, %Y', which gives you DATE: Sunday 06, 2011.


Further reading:

  • article Server Side Includes at Wikipedia
  • Apache Tutorial: Introduction to Server Side Includes
  • date(1) manual page at FreeBSD.org
like image 31
YasirA Avatar answered Nov 01 '22 11:11

YasirA


window.onload = initDate;
function initDate() {
     var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday");
     var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
     var now = new Date();
     var dtString = dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate();
     document.getElementById("dtField"). innerHTML = dtString;
}

Source

like image 25
user1480922 Avatar answered Nov 01 '22 10:11

user1480922


If your not opposed to PHP, then you could do something like this... Also Tizag.. http://www.tizag.com/phpT/phpdate.php

<?php
$todayPlusADay = mktime(0, 0, 0, date("m"), date("d")+1, date("y"));
echo "Todays Date Plus One Day (Tomorrow) ".date("m/d/y", $todayPlusADay); 
?>

Quick search for "php echo date + 1 day" produced that little diddy :) That could certainly be expanded upon to any extent just about.

like image 44
rhaag71 Avatar answered Nov 01 '22 10:11

rhaag71


You could use javascript to insert the date somewhere in the page:

<script type="text/javascript">
var newDate = new Date();
newDate.setDate(newDate.getDate() + 1);

//insert it via jquery
$('#displayDate').html((newDate.getMonth() + 1) + '/' + newDate.getDate() + '/' + newDate.getFullYear());

//or insert it via javascript
document.getElementById('displayDate').innerHTML = (newDate.getMonth() + 1) + '/' + newDate.getDate() + '/' + newDate.getFullYear();

</script>

and the html:

<span id="displayDate"></span>

test it here: http://jsfiddle.net/9xWUT/

like image 29
Victor Avatar answered Nov 01 '22 12:11

Victor


I recommend XDate because it will save a lot of typing. Also, please don't use innerHTML, it's such a bad habit. I just did the same on a web page and the key thing was to use inline javascript beneath the tag you are updating although you can use 'onload' as well.

In the page I add the tag and put in some default info just because:

<p>Today is <span id="todays_date" style="font-style: italic;">November 1, 2015</span></p>

With this below that:

<script type="text/javascript">
  var today = new XDate();

  document.getElementById("todays_date").innerHTML = "";

  document.getElementById("todays_date").appendChild(document.createTextNode(today.toString("MMMM d, yyyy")));
</script>

NB: I do use innerHTML to quickly obliterate nested tags rather than a recursive "delete all children" because that's in a different library and not pertinent to this example.

See http://arshaw.com/xdate/

like image 34
Richard Nunes Avatar answered Nov 01 '22 11:11

Richard Nunes