HTML passing parameters to javascript function that then does a date compare and then javascript returning a result to be displayed in html

Question

I am having problems figuring out how to do a date compare in Javascript, and how to pass and receive varialbes to and from Javascript Function and Html.

I have 4 term dates (workshop start and end dates for each term). I will send one set of dates at a time to the javascript function, and then I want the Javascript to check if today's date falls within the range of that workshop. Then the javascript should return a value like "workshop finished", "workshop in progress", "workshop to come" (depending on wheiter todays date is before, during, or after that specific date range). I'll call the function 4 different times - each with a different range of dates.

So for example, If the first set of dates are: 6th February till 13th March 2014, then how would I call the javascript function? This is what I have so far:

In the html - at the point where I want the status to be displayed, I tried this:

        <script language="JavaScript" type="text/javascript">
            <!--//  
                document.write(displayStatus(02062014, 03132014));  
            //-->
        </script>
        <noscript></noscript>           

I know that the above date formating is probably wrong that I am trying to send to the function, but I am not sure what format is needed to do a date compare. (Note: the empty noscript tags are because if scripting is turned off, I don't want anything displayed.)

I've started the function like this (found inside status-date.js file):

function displayStatus(fromDate,toDate) {

    todayDate = new Date();

    // this is a comment for code that needs to be written:
    //
    // magic happens here that compares today's date to the fromDate and toDate
    // and returns th appropriate status line
    //
    // the rest below is how I think the status is returned to the html 
    // (I'm using 'in progress' as a test example)

    var dateStatus = "in progress"
    return dateStatus;
}

Note: the function is loaded in from the head section as follows:

    <script src="assets/js/status-date.js" language="javascript" type="text/javascript"></script>

Even with this simple function.. that basically gives me the status without any calculations, just so I can test the comunication between HTML and function.. it doesn't display anything. So I can't really move forward until I figure out this basic step first.

So, could some kind sole help me figure this out.

1. How to properly send formated date parameters to the javascript function.

2. How to display the status results that need to be returned to the html

3. How do you (inside the function) check if todays date falls within a range of provided dates.

Thanks for any help provided.

SunnyOz

Answer 1

I believe that you are looking for something like this...

function displayStatus(fromDate,toDate) {
    var status;
    var today = new Date();
    today = Date.parse(today);
    if(today >= fromDate && today <= toDate) {
     status = 'In Progress';
    } else if(today > toDate) {
     status = 'Workshop Finished';
    } else {
     status = 'Workshop To Come';
    }
    
    return status;
}

<script>
  window.onload = function(){
    var startDate = new Date(2014,1,6); //6th February
    var endDate = new Date(2014,2,13); //13th March 2014
   document.write(displayStatus(Date.parse(startDate), Date.parse(endDate)));
  };
</script>

Here are some other helpful resources:

Compare two dates with JavaScript

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date