Calculating date difference in JavaScript is almost as easy as in PHP, but requires a bit different approach. For this post i wrote simple “static” js object which can calculate difference between two dates in: days, weeks, months and years.

To each function you pass two arguments/dates, the first one should be lower then second, or you will get negative number on the output, however the number will still be valid, although with negative sign, so you just need to multiply it by “-1″.

Calculating date difference in days and weeks works pretty much the same. First we get difference between UNIX timestamps for first and second dates and then divide it by number of milliseconds in a day (for days calculation), or by number of milliseconds in a week (for weeks calculation).

Number of milliseconds in a month vary (because months have different number of days), so we are taking a different approach. For each date multiply year by 12 and add current month, that gives total number of months since year 0. Now substract both numbers and we are done.

Calculating difference between years i leave without a comment . Source code with example usage below.

var DateDiff = {
 
    inDays: function(d1, d2) {
        var t2 = d2.getTime();
        var t1 = d1.getTime();
 
        return parseInt((t2-t1)/(24*3600*1000));
    },
 
    inWeeks: function(d1, d2) {
        var t2 = d2.getTime();
        var t1 = d1.getTime();
 
        return parseInt((t2-t1)/(24*3600*1000*7));
    },
 
    inMonths: function(d1, d2) {
        var d1Y = d1.getFullYear();
        var d2Y = d2.getFullYear();
        var d1M = d1.getMonth();
        var d2M = d2.getMonth();
 
        return (d2M+12*d2Y)-(d1M+12*d1Y);
    },
 
    inYears: function(d1, d2) {
        return d2.getFullYear()-d1.getFullYear();
    }
}
 
var dString = "May, 20, 1984";
 
var d1 = new Date(dString);
var d2 = new Date();
 
document.write("<br />Number of <b>days</b> since "+dString+": "+DateDiff.inDays(d1, d2));
document.write("<br />Number of <b>weeks</b> since "+dString+": "+DateDiff.inWeeks(d1, d2));
document.write("<br />Number of <b>months</b> since "+dString+": "+DateDiff.inMonths(d1, d2));
document.write("<br />Number of <b>years</b> since "+dString+": "+DateDiff.inYears(d1, d2));

I still sometimes forget how to set <select> value, although it’s pretty simple. I had to “figure it out again” today so here is a quick post for future reference for me and you if you are looking for such solution.

First let’s assume there is such “select” inside “form”.

<select id="my_select" name="fruits">
    <option value="1">apple</option>
    <option value="2">orange</option>
    <option value="3">peach</option>
</select>

Now in order to set option 2 (orange) as selected on DOM ready we can execute such short snippet of code

<script type="text/javascript">
$(function() {
   $("#my_select").val(2);
});
</script>

What if <option> does not have “value” attribute? What then? That’s a homework assignment … ok i admit, i don’t know that, but on the other hand i never had to deal with select box that does not have this attribute set.

Few days ago i wrote jQuery Plugin Tutorial, today i want to give away my first open source jQuery plugin: image resizer. I made sure that it’s compatible with all major browsers: IE6+, FF3, Opera10, Chrome (didn’t check with Safari, hope someone can do it for me).

The whole idea was to make it as simple as possible to resize image to given size. The common problem developers face is to resize image to (for example) no more then 150px width or no more then 75px height and because getting real image size is not as simple as it seems i think you will find this plugin useful. Read the rest of this entry »

jQuery is getting really popular lately. Employers looking for JavaScript developers often requires them to know this library inside out, so today i want to show you my practical guide to jQuery plugins development. With the emphasis on best practices in plugin development. Creating plugin is plain simple, but developing a high quality plugin is a different story. Further more it shocks me that there are tons of tutorials online that do not even make distinction between jQuery extension and jQuery Plugin. Read the rest of this entry »

If you ever created a script with JS, you probably know how painful logging messages with alert() function is. Not only you can see one message at the time but also you need to click OK button to go further. I think this is the reason why Scott Olson created BlackBird project. As you can see on the screenshoot, this project is not only useful but also looks great.

In this post i want to briefly review this utility and then show you how to use it, so if you are not interested in the review you can just skip ext part. Read the rest of this entry »