Tag Archives: jquery date format

format-a-date-jquery-1

Format a date using jquery

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.