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: , , , , , , , ,

Sincerelly,

Eko Wahyudiharto
PS: If you've benefit from this blog,
you can support it by making a small contribution.

Enter your email address:

Delivered by FeedBurner

Post a Comment Bookmark and Share

 

  1. Blogger javieth said,

    Friday, August 06, 2010 6:28:00 AM

    JavaScript is a good program and very easy to use. I don´t like a complex program. I prefer javascript because i consider it like a device very eficient and it have a good quality.
    I always looking for the quality that is why i prefer to buy viagra because i always have a great result in my sexual life.

  2. Blogger Muhammad Azeem said,

    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

Post a Comment

Leave comments here...