Dynamic date dependent dialog

Question

This is my first Question posted to Stack Overflow, so please forgive me if i'm approaching this incorrectly.

What I am trying to accomplish: creating a dynamic pop up that displays one of two messages depending on a set range of dates.

An example of the parameters for this message would be:

The fee from September 1 of an odd year to April 30 of an even year is $149

The fee from May 1 of an even year to August 31 of an odd year is $249

Dependent on these date ranges, I would like the pop-up to display only the current fee

Currently, I have a static pop-up that I created, but am unsure as to how I would re-factor this to dialog display the aforementioned content dynamically. I realize this is an extremely simple script in its current state, but any help would be greatly appreciated. I've searched for help, but have been unable to find anything on this specific type of pop-up

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<script>
function MyFunction()
{
alert("The fee from September 1st of an odd year to April 30th of an even year is $149 \nThe fee from May 1st of an even year to August 31st of an odd year is $249");
}
</script>
</head>

<a id="myLink" title="Click to display fee" href="Service_Pack_93_Planned_VR.pdf" onclick="MyFunction()">Application Form</a>

<body>
</body>
</html>

EDIT After digging deeper into conditional statements and date functions in JavaScript, I came up with the code below. This was before I saw aholmes's response (which is incredibly helpful). I plan to refactor what I currently have so that my code is more effective and accommodates what I have learned from your responses.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function myFunction()
{
var x="";
var startDate1=new Date('09/01/2013');
var endDate1=new Date('04/30/2014');
var startDate2=new Date('05/01/2014');
var endDate2=new Date('08/31/2015');

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = mm+'/'+dd+'/'+yyyy;

if (startDate1 < today < endDate1)
    {
    x="The fee is $" + "149"
    }
else if (startDate2 < today < endDate2)
    {
    x="The fee is $" + "249"
    }
document.getElementById("test").innerHTML=x;    
}

</script>

</head>
<body>

<button onclick="myFunction()">Try it</button>
<p id="test"></p>

</body>
</html>

EDIT

I had been trying to get my code working since updating my variables using the information aholmes provided me with, but had been unsuccessful. Today I came into work and modified some of the variables and I believe it is working. Thank you again for ALL of your help. If there is anything you see that could be cleaned up or modified, please let me know

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
function myFunction()
{
var x="";

// get the current date
var date = new Date(); // Fri Feb 07 2014 11:34:32 GMT-0800 (PST)

// this will return an integer, counting months starting from 0 (January). Since it is February at the moment, this will return 1.
var month = date.getMonth(); // 1

// this returns the full year as an integer - so 2014.
var year = date.getFullYear(); // 2014

var yearIsOdd = (year % 2 === 1); // false

// remember, months are 0-based, so September (the 9th month) is represented by an 8.
if (month >= 8 && yearIsOdd) {} // false - only month is checked due to short-circuiting.

console.log("month:" + month + " Year:" + year + " Odd?" + yearIsOdd)

// Remember order of operations. Division (and thus, modulo) happens before addition without parentheses!
var nextYearIsEven = !((year + 1) % 2); // false

if ((month >= 8 && yearIsOdd) || (month <= 3 && !yearIsOdd)) 
    {x="The fee is $" + "149"} // false - again, only month is checked
else 
    {x="The fee is $" + "249"}

document.getElementById("test").innerHTML=x;
}

</script>

<body>

<button onclick="myFunction()">Try it</button>
<p id="test"></p>

</body>
</html>

Thank you in advance!

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

You can solve this problem by checking what the current month and year are, and using the modulo operator to determine whether the current or next year is even or odd.

JavaScript has an object called Date that can help get you on the right track. The two methods we'll use are getFullYear() and getMonth().

Here are your original parameters.

The fee from September 1 of an odd year to April 30 of an even year is $149

The fee from May 1 of an even year to August 31 of an odd year is $249

So, we need to first check whether the current month is "greater than or equal to September" and whether the current year is an odd number.

Here's how you can do that in JavaScript.

// get the current date
var date = new Date(); // Fri Feb 07 2014 11:34:32 GMT-0800 (PST)

// this will return an integer, counting months starting from 0 (January). Since it is February at the moment, this will return 1.
var month = date.getMonth(); // 1

// this returns the full year as an integer - so 2014.
var year = date.getFullYear(); // 2014

Great! Now we have all the numbers we need to solve this problem. Now how can we determine whether your first case is true?

The first part is easy:

// remember, months are 0-based, so September (the 9th month) is represented by an 8.
if (month >= 8) {} // false

Now how do we determine whether the current year is even or odd? I'm going to use the modulo operator to find the remainder of dividing the year by 2. Even numbers have no remainder, while odd numbers have a remainder of one.

Next, I'm going to cast it to a bool. This isn't necessarily required, but explicitly using bools makes me feel better. I will use two "not" operators in conjunction: !!

This first converts the number (0 or 1) to a bool (false or true). The second ! then negates the result, and flips false to true, and true to false.

Let's see it in action.

var yearIsOdd = !!(year % 2); // false

if (month >= 8 && yearIsOdd) {} // false - only month is checked due to short-circuiting.

Cool! Now we know whether the year is odd, and if the month is or is after September.

Lastly, we need to determine whether the month is or is before April, and whether the year is even. I'm reading your question as if you need to check a range. So, my interpretation for the current date is "is the current month between September 2014 and April 2015?"

We're going to do the exact same thing we did to set yearIsOdd, only we have to add 1 to the current year.

Also note that I'm not using two ! not operators this time. This is because I want a 0 (meaning even) to set the variable to true, and a 1 (meaning not even) to set the variable to false.

// Remember order of operations. Division (and thus, modulo) happens before addition without parentheses!
var nextYearIsEven = !((year + 1) % 2) // false

if (month >= 8 && yearIsOdd && month <= 3 && nextYearIsEven) {} // false - again, only month is checked

There you go! I leave it to you as an exercise to solve the second constraint of your question.

As for the content of the dialog, checkout this answer: jQuery dialog with dynamic content

score 0 · Answer 2 · answered Feb 07 '14 at 17:52

Two things you need to look up: conditional statements in Javascript and the Date object in Javascript.

You need a conditional statement in your popup function to display one message or the other.

if (condition) {
    alert("The fee from September 1 of an odd year to April 30 of an even year is $149.");
} else if (other condition) {
    alert("The fee from May 1 of an even year to August 31 of an odd year is $249.");
}

I'm not sure what your condition should be, but I imagine you want to compare today's date with those ranges. Javascript has a Date object that you can use to get certain dates.

Then all you would need to do is:

var currentDate = new Date(); // today's date
var oddStartDate = new Date(something here); // one date to compare
var oddEndDate = new Date(something here); // other date to compare
if (currentDate > oddDate && currentDate < oddEndDate ) {
    alert("Display one thing");
} else if (other condition) {
    alert("Display other thing");
}

Note the above logic might not be correct, but it shows what you need to do in your Javascript function in order for it to do what you want. There also might be a better way to do this!

Dynamic date dependent dialog

2 Answers2