javascript date adding days and formatting

Mark Brady
Mark Brady used Ask the Experts™
on
I can't get this to work. I have a short date like this '6/8/2011'
The date is formatted so it shows day then month then year. When I click a button I need to change that date so it adds 7 days to it and displays the result. Here is the button and javascript I have so far.

The code on the button includes this

onclick="swapDate1(7)"

and the function

function swapDate1(days){
var shortDate = document.getElementById('theShortDate').innerHTML; // displays the short date
var theDate = new Date();
theDate.setDate(theDate.getDate() + days); // adds days to the date (in my case - 7 days)
alert(theDate);
// Now the date will display as a full date ie: Sat Aug 13 2011 15:41:44 GMT+1200 (NZST)
// I need to convert it here back to 13/8/2011
// I have tried theDate.toString('d/M/yyyy'); but no luck
var currentDay = theDate.getDay();
var currentMonth = theDate.getMonth() + 1;
var currentYear = theDate.getFullYear();
var shortDate = currentDay + '/' + currentMonth + '/' + currentYear; // I tied this as well but it formats the current date
document.getElementById('theShortDate').innerHTML = shortDate; // display the new date
}

The div that holds the short date format is only there for display. I don't really need it as the function will ALWAYS add or subtract 7 days. It is a calendar display. Why is my function not formatting the new date instead of the current date.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
Check this: http://jsfiddle.net/t62MV/

JS :
function swapDate1(days){
    var shortDate = document.getElementById('theShortDate').innerHTML.split("/"); // displays the short date
    shortDate = new Date(shortDate[2],parseInt(shortDate[1])-1,parseInt(shortDate[0])+days);
    //shortDate = new Date(new Date(shortDate[2],parseInt(shortDate[1])-1,shortDate[0]).getTime() + (days * 24 * 3600 * 1000));
    document.getElementById('theShortDate').innerHTML = d2(shortDate.getDate()) + "/" + d2(shortDate.getMonth() + 1) + "/" + shortDate.getFullYear(); // display the new date
}
function d2(n) { return (n>9)?n:"0"+n; }

Open in new window

Fixer of Problems
Most Valuable Expert 2014
Commented:
Try this.  You were getting the day of the week, not the date.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function swapDate1(days){
//var shortDate = document.getElementById('theShortDate').innerHTML; // displays the short date
var theDate = new Date();
theDate.setDate(theDate.getDate() + days); // adds days to the date (in my case - 7 days)
alert(theDate);
document.getElementById('thehortDate').innerHTML = theDate; // display the new date

// Now the date will display as a full date ie: Sat Aug 13 2011 15:41:44 GMT+1200 (NZST)
// I need to convert it here back to 13/8/2011
// I have tried theDate.toString('d/M/yyyy'); but no luck
var currentDay = theDate.getDate();
var currentMonth = theDate.getMonth() + 1;
var currentYear = theDate.getFullYear();
var shortDate = currentDay + '/' + currentMonth + '/' + currentYear; // I tied this as well but it formats the current date
document.getElementById('theShortDate').innerHTML = shortDate; // display the new date
}
// -->
</script>
</head>
<body>
<p onclick="swapDate1(7)">Click me...</p>
<div id="thehortDate">...</div>
<div id="theShortDate">...</div>
</body>
</html>

Open in new window

Mark BradyPrincipal Data Engineer

Author

Commented:
Yep that was it! I was getting day for some reason. Thanks a lot.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
You're welcome, glad to help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial