Slideshow shadow

Format a date using jquery

January 28, 2014 in Reference by Michael Howell

There are many ways to format an a date to display on a page. In this tutorial we will see how to format a date using jQuery.

Using jquery-dateFormat plugin

This plugin is especially useful when you have a pre-selected date display format. jquery-dateFormat makes it easy to format the date based on a format string.
Here is a sample:

document.write($.format.date(new Date(), "Today: dd/MM/yyyy"));

The code above prints the date like this:

Today: 18/12/2014

Here is the link to the format pattern reference.

Pretty date formatting

prettyDate() function gives you the relative date that you often see in social media sites.
for example:

jQuery.format.prettyDate(new Date())

returns “just now”

This is useful in certain cases where the relative time reference is makes more sense, like the time of a comment. The date will be displayed like this

“1 minute ago”
“2 days ago”
etc.

Taking it global

When you have audience from different cultures and languages, you need to format the date, time, currency and numbers according to those cultures. In those scenarios, it is not advisable to use a fixed date format. You have to format the date according to the user’s locale.

Globalize.js is perfect for this purpose.
Using Globalize.js you can format the date according to user’s locale preference.
See why globalization

Globalize.format() function takes the date and formats it based on user preference and locale.
You don’t have to worry whether it is dd/mm or mm/dd

more on globalize date format.

Animate background color using jQuery

January 23, 2014 in jQuery Snippets by Michael Howell

So you want to animate the background color of an element for some nice effects.
Here are the best ways to do it.

Using the Bitstorm color animation plugin

The easiest would be using Bitstorm color animation plugin
The usage is simple:

$('#yourdiv').animate({backgroundColor: '#fff'})

This will animate the background color from current color to white in a smooth animation
This plugin supports animating the color of border or text color as well.

Demo | Download Source

Using jQuery UI

If you already have jQuery UI included in your page, there is no need to add any other plugin (like the Bitstorm plugin mentioned above). The code is same.

More info about the animate() jQuery function