Pretty Date v0.1.0

A simple jQuery date prettify plugin.

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

HTML:

<span prettydate>Jan 01 2014</span>

Demo:

Jan 01 2014

Add options with data-* attribute

HTML:

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

Demo:

2020.1.1 20:20:11

Initialize with $.fn.prettydate method

Basic

HTML:

<span class="prettydate">Nov 11 2011 11:11:11</span>

Javascript:

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

Demo:

Nov 11 2011 11:11:11

Add options

HTML:

<p class="prettydate-add-options"></p>

Javascript:

$(".prettydate-add-options").prettydate({
  date: (new Date()).getTime() + (24 * 60 * 60 * 1000) // Tomorrow
});

Demo:

Configure

Setup

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-fast="true".

Name Type Default Description
afterSuffix string "later"
beforeSuffix string "ago"
autoUpdate boolean false Auto update the pretty date string after a duration.
date object / number / string null The target date for prettify. Allow date object, date number (milliseconds), valid date string, or custom date string with a date format.
dateFormat string "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 number 60000 The duration milliseconds of the auto update action.
messages object (as follows) For each message, the first "%s" placeholder will be replaced with the date diff number, and the second "%s" placeholder will be replaced with the before or after suffix.

Default messages:

{
  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"
}

Methods

prettify

destroy

I18n

For example:

// zh-CN
$.fn.prettydate.setDefaults({
  afterSuffix: "后",
  beforeSuffix: "前",
  dateFormat: "YYYY-MM-DD hh:mm:ss",
  messages: {
    second: "刚刚",
    seconds: "%s秒%s",
    minute: "一分钟%s",
    minutes: "%s分钟%s",
    hour: "一小时%s",
    hours: "%s小时%s",
    day: "一天%s",
    days: "%s天%s",
    week: "一周%s",
    weeks: "%s周%s",
    month: "一个月%s",
    months: "%s个月%s",
    year: "一年%s",
    years: "%s年%s",
    yesterday: "昨天",
    beforeYesterday: "前天",
    tomorrow: "明天",
    afterTomorrow: "后天"
  }
});

View the demo

More demos

Auto update

HTML:

<span class="prettydate-auto-update"></span>

JavaScript:

$(".prettydate-auto-update").prettydate({
  autoUpdate: true,
  date: new Date(),
  duration: 1000
});

Demo: