JavaScript: Return Multiple Values in Count Between Dates Function
JavaScript is one of parts that can’t be separated with web programming. Sometimes we usually depend on it, although we can solve the problem with another technique but the use of JavaScript is much helpful to support dynamic runtime application. For example manipulating or counting math is possibly without refreshing the page. Therefore, it is much simpler than AJAX. This article purposely dedicated to my self & any newbies which want to learn JavaScript methods.Just like my own experience improving a page counting difference between two dates, here I found something new & I’d like to archived for me then share to you. The web page project it self are related to MySQL date field type & based on PHP programming. The subject was, how to calculate the year & month difference by both dates after the page loaded & once the date object is changed? As usual, I set the date interface with JavaScript so it would generate an interesting GUI just like common date object on Win32 programming.
Those dates GUI are compatible with date type format in MySQL (yyyy-mm-dd). When the date icon clicked, it will show small interactive calendar panel. The first date object I named with date_start, the second is date_end & sequentially, the difference year & month is n_year & n_month. The core date subtract function need 2 parameter dates & I created as well as it will return more than one value (year & month). On JavaScript, the treatment is put it on array mode. Pick out a small portion below:
function selisihTgl(dateEnd,dateStart)
{
…
return [yearAge, monthAge];
}
Displaying returned both value from function in array are simply called the array variable just like any others programming which is 0 based in bracket.
function fSelisih(sender)
{
…
obj.n_year.value=selisih[0]
obj.n_month.value=selisih[1]
}
That’s it, kinda simple isn’t it? By the way – unfortunately -, when dates changed, the date GUI object doesn’t have trigger event to call the function. So, I take <FORM> tag with onMouseMove event. Pretty dumb, but it works fine. Below is complete script from A to Z, check this out:
// portion of PHP code to retrieve both dates value from MySQL database
...
//
<HTML>
<HEAD>
<TITLE>Your Title Please</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<script language="JavaScript">
function selisihTgl(dateEnd,dateStart)
{
var baru = new Date(dateEnd.substring(0,4),
dateEnd.substring(5,7)-1,
dateEnd.substring(8,10));
var yearBaru = baru.getYear();
var monthBaru = baru.getMonth();
var dateBaru = baru.getDate();
var lama = new Date(dateStart.substring(0,4),
dateStart.substring(5,7)-1,
dateStart.substring(8,10));
var yearLama = lama.getYear();
var monthLama = lama.getMonth();
var dateLama = lama.getDate();
yearAge = yearBaru - yearLama;
if (monthBaru >= monthLama)
var monthAge = monthBaru - monthLama;
else
{
yearAge--;
var monthAge = 12 + monthBaru -monthLama;
}
if (dateBaru >= dateLama)
var dateAge = dateBaru - dateLama;
else
{
monthAge--;
var dateAge = 31 + dateBaru - dateLama;
if (monthAge < 0)
{
monthAge = 11;
yearAge--;
}
}
return [yearAge, monthAge];
}
function fSelisih(sender)
{
var obj=sender;
var selisih = selisihTgl(obj.date_end.value,obj.date_start.value);
obj.n_year.value=selisih[0]
obj.n_month.value=selisih[1]
}
</script>
<BODY onLoad="fSelisih(this)">
...
<form action="path/to/save/or/ignore/it" method="post" name="form1" onMouseMove="fSelisih(this)">
...
</form>
...
</BODY>
</HTML>
Don’t forget to insert the function within onLoad event on <BODY> tag to automatically count them expressly when the page are fully loaded.
Done! Enough for now lesson & I’ll be back with another unique tips & trick programming.
Labels: JavaScript, My Tricks, My Works, MySQL, PHP, Programming, Projects, Tips Trik, Web Programming
| PS: If you've benefit from this blog, you can support it by making a small contribution. |
Wednesday, March 30, 2011 1:58:00 AM
This is a nice article..
Its easy to understand ..
And this article is using to learn something about it..
c#, dot.net, php tutorial, Ms sql server
Thanks a lot..!
ri70