Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Working with dates and conditional text formatting

    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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    09Harvey (06-21-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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...

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts
    And one more thing, how can you concatenate the red text with the non-red text?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    Put the text to be red in its own <span>.

    e.g.,
    Code:
    <div id="result" style="visibility: hidden;">DIfference in days is <span id="days"></span></div>
    and then maybe
    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 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:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    09Harvey (06-21-2012)

  • #6
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Heres what i got..thanks

    <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>

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    Looks okay to me. Does it work as you wanted?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    09Harvey (06-22-2012)

  • #8
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    Ummm...and what IS your "other problem". I don't see any posts about it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    09Harvey (06-24-2012)

  • #10
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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




    Code:
    <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>

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,037
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Code:
    <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>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    09Harvey (06-26-2012)

  • #12
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts
    alert(addedTimeInProperFormat);
    Let us say im not going to use "alert"

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

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    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
    Code:
        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 );
    or however many days you want to add.

    p.s.: To subtract days from today, just pass a negative number to the function.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    09Harvey (06-25-2012)

  • #14
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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 );

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    09Harvey (06-26-2012)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •