Recently, one of my clients needed an alert to display changes to one of their processes. They needed it to display every time a user visited the page until it reached a specific date. In the example below I've created a basic Javascript function that allows you to enter a start date, end date and return type. For example, after you've added your start and end date you want to either put in weeks, days, hours, minutes or seconds into the interval property. Next, create a JQUERY function that will call the datediff and display an alert dialog with the content you've assigned which in this case is a div that has an id of "alertDate".
//START HEAD SECTION
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function datediff(fromDate, toDate, interval) {
var second = 1000, minute = second * 60, hour = minute * 60,
day = hour * 24,week = day * 7;
fromDate = new Date(fromDate);
toDate = new Date(toDate);
var timediff = toDate - fromDate;
if (isNaN(timediff)) return NaN;
switch (interval) {
case "years": return toDate.getFullYear() - fromDate.getFullYear();
case "months": return ((toDate.getFullYear() * 12 + toDate.getMonth())
-
(fromDate.getFullYear() * 12 + fromDate.getMonth()));
case "weeks": return Math.floor(timediff / week);
case "days": return Math.floor(timediff / day);
case "hours": return Math.floor(timediff / hour);
case "minutes": return Math.floor(timediff / minute);
case "seconds": return Math.floor(timediff / second);
default: return undefined;
}
}
$(function () {
var curDate = new Date();
var alertDate = new Date();
alertDate.setDate(alertDate.getDate() +
datediff(curDate, alertDate, 'days'));
if (alertDate.toDateString() >= curDate.toDateString()) {
$("#alertMsg").dialog({
height: 500,
width: 650,
modal: true
});
}
});
</script>
//END HEAD SECTION
//START BODY SECTION
<div id="alertMsg" style="background-color: #f5fa64;" title="IMPORTANT NOTIFICATION!!">
<h2 style="font-size: 30px; margin: 0; text-align: center;">
ATTENTION!!</h2>
This is a custom alert that will continue to display until the current date time is greater or equal to
the current date time.
</div>
//END BODY SECTION
