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.

How to properly send formated date parameters to the javascript function.
How to display the status results that need to be returned to the html
How do you (inside the function) check if todays date falls within a range of provided dates.

Thanks for any help provided.

SunnyOz

Community · Accepted Answer · 2017-05-23 11:50:44Z

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

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Sep 17, 2014 at 4:24

Joseph

1,08610 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SunnyOz Over a year ago

Fantastic.. thanks for your help. The javascript date compare works great. However, I must be implementing it wrong, because when I put the script in the area of code where I want the status to display.. the HTML PAGE doesn't display at all. The only thing that is displayed is a blank screen with the staus "Workshop Finished" showing in the upper left hand corner. I obviously have left out some step?? Could you be kind enough to help me know how to get the status to display on the html page in the specific location where I want it. Thx

SunnyOz Over a year ago

Oh.. I got it to work correctly.. I just had to remove the function statement from within the script tags, and it worked: ie: removed "window.onload = function(){" and "}". Thanks very much.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related