...

View Full Version : Working with dates and conditional text formatting



09Harvey
06-21-2012, 12:50 AM
Hi all,

I have two dates with format [mm/dd/yy]
and I want to get the difference on the number of days.

and how can I make the text of "X" days to become red if the result is negative

Im a quick learner if i just know the basics. hope you can guide me to a good start on my coding.


here where im at now:

<html>
<head>
<title></title>
</head>
<body>

<script language="javascript">
function subtractdate(form)
{
var a = form.datetextbox1.value;
var b = form.datetextbox2.value;
var datedifference = parseFloat(a) - parseFloat(b) + " days difference"; // <--i think this is not correct
document.getElementById('result').innerHTML = datedifference;
}

</script>

<form>
ie. [mm/dd/yy] - [mm/dd/yy] = X/-X days difference<br><br>

<input type=text name="datetextbox1" onchange="subtractdate(this.form);">-
<input type=text name="datetextbox2" onchange="subtractdate(this.form);">
<div id="result"></div>
</form>


</body>
</html>

Old Pedant
06-21-2012, 01:29 AM
<script language="javascript">
function subtractdate(form)
{
// whether these first two lines work or not
// depends on the format of the dates in the text fields
var datea = new Date( form.datetextbox1.value );
var dateb = new Daet( form.datetextbox2.value );

var msDiff = datea.getTime() - dateb.getTime();
var daysDiff = msDiff / 1000 / 60 / 60 /24; // 1000ms/sec, 60 sec/min, 60 min/hr, 24 hr/day
// but because of daylight savings time, that could be off by one hour
// so just round it:
daysDiff = Math.round( daysDiff );

var div = document.getElementById('result');
div.innerHTML = daysDiff;
if ( daysDiff < 0 ) div.style.color = "red";
}

If the date formats you are using don't work with new Date( ) as shown, we will have to transform them to a legal form. Show what you are using if the above doesn't seem to work. But mm/dd/yyyy should be okay.

09Harvey
06-21-2012, 01:36 AM
The textbox are just for mm/dd/yy only or im planing to change them with date picker or something similar.. aprreciate the help..thanks...

09Harvey
06-21-2012, 01:38 AM
And one more thing, how can you concatenate the red text with the non-red text?

Old Pedant
06-21-2012, 01:57 AM
Put the text to be red in its own <span>.

e.g.,

<div id="result" style="visibility: hidden;">DIfference in days is <span id="days"></span></div>

and then maybe


function subtractdate(form)
{
// whether these first two lines work or not
// depends on the format of the dates in the text fields
var datea = new Date( form.datetextbox1.value );
var dateb = new Daet( form.datetextbox2.value );

var msDiff = datea.getTime() - dateb.getTime();
var daysDiff = msDiff / 1000 / 60 / 60 /24; // 1000ms/sec, 60 sec/min, 60 min/hr, 24 hr/day
// but because of daylight savings time, that could be off by one hour
// so just round it:
daysDiff = Math.round( daysDiff );

var span = document.getElementById("days");
span.innerHTML = daysDiff;
if ( daysDiff < 0 ) span.style.color = "red";
document.getElementById('result').style.visibility = "visible";
}

Or, if you want to build up all the contents of the <div> in the HTML code:


function subtractdate(form)
{
// whether these first two lines work or not
// depends on the format of the dates in the text fields
var datea = new Date( form.datetextbox1.value );
var dateb = new Daet( form.datetextbox2.value );

var msDiff = datea.getTime() - dateb.getTime();
var daysDiff = msDiff / 1000 / 60 / 60 /24; // 1000ms/sec, 60 sec/min, 60 min/hr, 24 hr/day
// but because of daylight savings time, that could be off by one hour
// so just round it:
daysDiff = Math.round( daysDiff );

var div = document.getElementById('result');
div.innerHTML = "Days between dates: <span>" + daysDiff + "</span>";
if ( daysDiff < 0 )
{
div.getElementsByTagName("span")[0].style.color = "red";
}

Or dozens of other ways.

09Harvey
06-21-2012, 02:43 AM
Heres what i got..thanks :thumbsup:

<html>
<head>
<title></title>
</head>
<body>

<script language="javascript">
function subtractdate(form)
{
// whether these first two lines work or not
// depends on the format of the dates in the text fields
var datea = new Date( form.datetextbox1.value );
var dateb = new Date( form.datetextbox2.value );

var msDiff = datea.getTime() - dateb.getTime();
var daysDiff = msDiff / 1000 / 60 / 60 /24; // 1000ms/sec, 60 sec/min, 60 min/hr, 24 hr/day
// but because of daylight savings time, that could be off by one hour
// so just round it:
daysDiff = Math.round( daysDiff );

var span = document.getElementById("days");
span.innerHTML = daysDiff;
if ( daysDiff < 0 )
{
span.style.color = "red";
document.getElementById('result').style.visibility = "visible";
}
else
{
span.style.color = "black";
document.getElementById('result').style.visibility = "visible";
}
}

</script>


<form>
ie. [dd] - [mm/dd/yy] = X days difference<br><br>

<input type=text name="datetextbox1" onchange="subtractdate(this.form);">-
<input type=text name="datetextbox2" onchange="subtractdate(this.form);">
<div id="result" style="visibility: hidden;">Difference in days is <span id="days"></span></div>

</form>

</body>
</html>

Old Pedant
06-21-2012, 03:56 AM
Looks okay to me. Does it work as you wanted?

09Harvey
06-22-2012, 04:12 AM
Yes, your code is helpful.

i got the <div> and <span> but im still digesting the math/date manipulation because I cant use it on my other problem.

Old Pedant
06-22-2012, 04:22 AM
Ummm...and what IS your "other problem". I don't see any posts about it.

09Harvey
06-24-2012, 08:48 PM
Ummm...and what IS your "other problem". I don't see any posts about it.

Here is my other problem, it is just like a reverse on what you did but I can figure it out.

1. How to add X days to the current date?
2. And then how to display that date into 'Mmm dd, yyyy' format - ie. Oct 22, 2011





<html>
<head>
<title></title>
</head>
<body>

<script language="javascript">
function subtractdate(form)
{
var datea = new Date( form.datetextbox1.value );
var dateb = new Date( form.datetextbox2.value );
var X = parseFloat(form.dropdown1.value); //X can be + or -
var msDiff = datea.getTime() - dateb.getTime();
var daysDiff = msDiff / 1000 / 60 / 60 /24; // 1000ms/sec, 60 sec/min, 60 min/hr, 24 hr/day
// but because of daylight savings time, that could be off by one hour
// so just round it:
daysDiff = Math.round( daysDiff );

// var datec = new date() + dayDiff; <--I cannot add the current date to the 'dayDiff'

daysDiff = X - daysDiff;
var span = document.getElementById("days");
span.innerHTML = daysDiff;
if ( daysDiff < 0 )
{
span.style.color = "red";
document.getElementById('result').style.visibility = "visible";
}
else
{
span.style.color = "green";
document.getElementById('result').style.visibility = "visible";
}
span.innerHTML = datec;
{
}

}

function init(form)
{
var ddd= new date();
var txt= "CurrentDate: " + ddd;
document.getElementById('resultx').innerHTML = txt;
}


</script>

<form>

<div id="resultx"></div>
CurrentDate<input type=text name="datetextbox1" value="12/24/2012" onchange="subtractdate(this.form);" disabled=disabled> <-- must auto change to the current date<br>
VarDate<input type=text name="datetextbox2" value="12/19/2012" onchange="subtractdate(this.form);"> <-- must not go over the current date<br>
VarDays
<select name="dropdown1" onchange="subtractdate(this.form);">
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select><br><br>
<div id="result" style="visibility: hidden;"><b>Limit:</b> <span id="days"></span> <b>, Expires at:</b> datec='Mmm dd, yyyy'</div><br>


</form>
</body>
</html>

Philip M
06-24-2012, 10:55 PM
<select id="myselectbox">
<option value="3">3 days</option>
<option value="10">10 days</option>
<option value="20">20 days</option>
<option value="30">30 days</option>
</select>

<input type="button" value="Add date" onclick="return addDate(new Date());" />


<script type="text/javascript">
function addDate(addtoDate) {
var orignaltime = new Date(addtoDate).getTime();
var dropdowndateinMS = document.getElementById("myselectbox").value * 86400 * 1000;//day x seconds x milliseconds
var addedtime = orignaltime + dropdowndateinMS ;
var addedTimeInProperFormat = new Date(addedtime);
addedTimeInProperFormat = addedTimeInProperFormat.toDateString()
alert(addedTimeInProperFormat);
}
</script>

09Harvey
06-25-2012, 01:06 AM
alert(addedTimeInProperFormat);

Let us say im not going to use "alert"

How can you display the result using <div> & <span>?

Old Pedant
06-25-2012, 03:03 AM
Actually, there's a much easier way to add a number of days to the given date.

And Philip's code doesn't give you the date format you wanted, anyway.

But you should know by now how to put any value into some spot on the page. Just use innerHTML. Notice how we did it in the date subtraction problem


span.innerHTML = datec;


SO:


function addDaysToToday( numDays )
{
var date = new Date();
date.setDate( date.getDate() + numDays );
var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
return months[date.getMonth()] + " " + date.getDate() + ", " + date.getFullYear();
}

And then you can put the result of that into any <div>, <span>, etc. by just doing something like:


document.getElementById("whereverYouWantId").innerHTML = addDaysToToday( 17 );

or however many days you want to add.

p.s.: To subtract days from today, just pass a negative number to the function.

09Harvey
06-26-2012, 02:15 AM
Im sorry but i cannot make it to work. does it matter if im using IE8?



span.innerHTML = datec;SO:

Code:
function addDaysToToday( numDays )
{
var date = new Date();
date.setDate( date.getDate() + numDays );
var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
return months[date.getMonth()] + " " + date.getDate() + ", " + date.getFullYear();
}And then you can put the result of that into any <div>, <span>, etc. by just doing something like:

Code:
document.getElementById("whereverYouWantId").innerHTML = addDaysToToday( 17 );

Old Pedant
06-26-2012, 02:40 AM
No. That code is universal.

So where *DID* you put the result? My last line there with "whereverYouWanId" was just for demonstration, you know?

Maybe you need to show us your page? Have a URL for it?

09Harvey
06-26-2012, 03:51 AM
Nevermind what i just have said... it came into my senses now :)


Im sorry but i cannot make it to work. does it matter if im using IE8?


Man you are good! kudos to you Old pedant... I like to share what i have come up with:



<html>
<head>
<title></title>
</head>
<body>

<script language="javascript">

function subtractdate(form)
{
var datea = new Date( form.datetextbox1.value );
var dateb = new Date( form.datetextbox2.value );
var Guarantee = parseFloat(form.dropdown1.value);
var msDiff = datea.getTime() - dateb.getTime();
var daysDiff = msDiff / 1000 / 60 / 60 /24; // 1000ms/sec, 60 sec/min, 60 min/hr, 24 hr/day
// but because of daylight savings time, that could be off by one hour
// so just round it:
daysDiff = Math.round( daysDiff );
var countDown = Guarantee - daysDiff;

//^^^^^^^^^
var mydate = new Date( form.datetextbox2.value );
mydate.setDate(mydate.getDate() + Guarantee); //purchasedate + guarantee
var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var Newdateformat = months[mydate.getMonth()] + " " + mydate.getDate() + ", " + mydate.getFullYear();
//^^^^^^^^^

var span = document.getElementById("days");
span.innerHTML = countDown;
if ( countDown < 0 )
{
span.style.color = "red";
document.getElementById('result').style.visibility = "visible";
}
else
{
span.style.color = "green";
document.getElementById('result').style.visibility = "visible";
}

var span = document.getElementById('mydateID');
span.innerHTML = Newdateformat;
}

</script>

<form>
CurrentDate<input type=text name="datetextbox1" value="12/25/2012" onchange="subtractdate(this.form);" disabled=disabled> <-- must auto change to the current date<br>
PurchaseDate<input type=text name="datetextbox2" value="12/20/2012" onchange="subtractdate(this.form);"> <-- must not go over the current date<br>
Guarantee
<select name="dropdown1" onchange="subtractdate(this.form);">
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select> days<br><br>

<div id="result" style="visibility: hidden;"><b>Countdown:</b> <span id="days"></span> <b>, Expire date:</b> <span id="mydateID"></span></div><br>

</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum