Pretty Date

A jQuery date prettify plugin.

• Documentation

Main

dist/ ├── prettydate.js      (9 KB) └── prettydate.min.js  (4 KB)

Getting started

Installation

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required --> <script src="/path/to/prettydate.js"></script>

Usage

Initialize with prettydate attribute

Basic

<span prettydate>Jan 01 2014 20:14:11</span>

Add options with data-* attribute

<span prettydate data-date-format="YYYY.M.D h:m:s">2014.1.1 20:14:11</span>

Initialize with $.fn.prettydate method

Basic

<span class="prettydate">Jan 01 2014 20:14:11</span>

$(".prettydate").prettydate();

Add options

<span class="prettydate"></span>

$(".prettydate").prettydate({     date: "01/01/2014 20:14:11",     dateFormat: "MM/DD/YYYY hh:mm:ss" });

Configure

Setup

Setup with $("#target").prettydate(options), or global setup with $.fn.prettydate.setDefaults(options).

Options

afterSuffix

• type: string
• default: "later"

beforeSuffix

• type: string
• default: "ago"

autoUpdate

• type: boolean
• default: false

Auto update the pretty date string.

date

• type: object / number / string
• default: null

The target date for prettify. Allow date object, date number (milliseconds), valid date string, or custom date string with a date format.

dateFormat

• type: string
• default: "YYYY-MM-DD hh:mm:ss"

"Y" for year, "M" for month, "D" for day, "h" for hour, "m" for minute, "s" for second.

duration

• type: number
• default: 60000

The duration milliseconds of the auto update action.

messages

• type: object
• default:

{     second: "Just now",     seconds: "%s seconds %s",     minute: "One minute %s",     minutes: "%s minutes %s",     hour: "One hour %s",     hours: "%s hours %s",     day: "One day %s",     days: "%s days %s",     week: "One week %s",     weeks: "%s weeks %s",     month: "One month %s",     months: "%s months %s",     year: "One year %s",     years: "%s years %s",      // Extra     yesterday: "Yesterday",     beforeYesterday: "The day before yesterday",     tomorrow: "Tomorrow",     afterTomorrow: "The day after tomorrow" }

For each message, the first "%s" placeholder will be replaced with the date difference number, and the second "%s" placeholder will be replaced with the before or after suffix.

Methods

prettify

• Prettify and replace the date again.
• Usage: $("#target").prettydate("prettify").

destroy

• Destroy the prettydate instance from the element.
• Usage: $("#target").prettydate("destroy").

Browser Support

• IE 6+
• Chrome 33+
• Firefox 27+
• Safari 5.1+
• Opera 19+

As a jQuery plugin, you can reference to the jQuery Browser Support.

License

Released under the MIT license.