runkids / vue2-timeago

:raised_hands: A vue component used to format date with time ago statement. :speech_balloon:

vue2-timeago

vue2-timeago V2

🔥 NEW vue2-timeago for Vue 3

• Localization supported
• Show tooltip
• Auto refresh time
• When time refresh call a customizable function
• Formats a date/timestamp to:
  • just now
  • 5m
  • 3h
  • 2 days ago
  • 2017-08-03
• Rules:
  • less than 1 minute , show just now
  • 1 minute ~ 1 hour , show ** minutes ago
  • 1 hour ~ 1 day , show ** hours ago
  • 1 day ~ 1 month( 31 days ) , show ** days ago
  • more than 1 month( 31 days ) , show yyyy-mm-dd hh:mm

FOR 1.X PLEASE GO TO THE 1.x BRANCH

Navigation

• Changelog
• Installation
• Usage
• Examples
• Props
• Contributions

Live Demo

Local Demo

yarn
yarn serve

Installation

Get from npm / yarn:

npm i vue2-timeago@2.0.9

yarn add vue2-timeago@2.0.9

or just include vue2-timeago.umd.min.js to your view like

<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue2-timeago.umd.min.js'></script>

Usage

Use this inside your app:

import { TimeAgo } from 'vue2-timeago'

export default {
  name: 'app',
  components: {
    TimeAgo,
  }
}

With Default CSS

import 'vue2-timeago/dist/vue2-timeago.css'

or just include vue2-timeago.css

HTML

<time-ago :refresh="60" :datetime="new Date(2018, 7, 4, 0, 24, 0)" locale="zh_TW" tooltip></time-ago>

Examples

1. locale

Default locale is en, and the library supports en and zh_TW.

<time-ago locale="en"></time-ago> 
<time-ago :locale="locale"></time-ago> use v-bind

export default {
  ...
  data(){
    return{
      locale:"zh_TW",
    }
  },
  ...

2. datetime

<time-ago datetime="2018-08-03 15:47:00"></time-ago> 
<time-ago :datetime="new Date(2018, 7, 4, 0, 24, 0)"></time-ago> use v-bind
<time-ago :datetime="1533286641826"></time-ago> timestamp

• Note. Don't bind with new Date() when you use refresh property. Because every time refresh will get a new date value.

  <time-ago :datetime="new Date(2018, 7, 4, 0, 24, 0)"></time-ago>  --> OK
  <time-ago refresh :datetime="new Date()"></time-ago> --> not OK

  If you want use new Date() , just remove datetime property.

  <time-ago refresh></time-ago>

3. refresh

<time-ago refresh></time-ago> Boolean , default refresh time 60/s
<time-ago :refresh="3600"></time-ago> bind value with a number
<time-ago :refresh="1"></time-ago> Refresh time 1 second

4. tooltip

• Base on v-tooltip, you can use placement attribute that are allowed in v-tooltip.

<time-ago tooltip></time-ago> Show tooltip 
<time-ago :tooltip="false"></time-ago> Disabled tooltip

5. tooltip options

• Default options:

{
  placement: 'top',
  content: {datetime string}
}

• Custom options

<time-ago tooltip :tooltip-options="tooltipOptions"/>

data () {
  return {
    tooltipOptions: {
      placement: 'bottom',
    }
  }
}

• More info see https://github.com/Akryum/v-tooltip#other-options.

6. long

<time-ago :datetime="datetime"></time-ago> show : 2d
<time-ago :datetime="datetime" long></time-ago> show : 2 days ago

7. vue2-timeago event

You can do something when time refresh every time

<time-ago :refresh="1" :locale="locale" @update="timeRefresh" />

Parameters example:

methods: {
  timeRefresh({ timeago, nowString, timestamp }) {
    console.log(timeago) // 51m
    console.log(nowString) // 2021-01-21 10:55
    console.log(timestamp) // Thu Jan 21 2021 10:55:18 GMT+0800 (台北標準時間)
  }
}

8. native event

<time-ago @click="todo"><time-ago/>
<time-ago @mouseover="todo"><time-ago/>

Props

Property	Type	Default	Description
datetime	Date, String, Number	new Date()	The datetime to be formatted.
locale	String	en	message language
refresh	Boolean, Number	false	The period to update the component, in seconds. When true it will be 60s. Also you can bind a number.
long	Boolean	false	Show long string with time message . ex. 3h -> 3 hours age
tooltip	Boolean	false	Show tooltip.
tooltip-options	Object	{ placement: 'top', content: #datetime string }	tooltip options

Event

Property	Description
update	After timer refreshed will trigger this event

Nuxt (global registration)

To install in nuxt run

npm i vue2-timeago

In nuxt.config.js add

  plugins: [
    { src: '~/plugins/vue2-timeago' }
  ],

In plugins/vue2-timeago.js type:

import Vue from 'vue';
import { TimeAgo } from 'vue2-timeago';

import 'vue2-timeago/dist/vue2-timeago.css';

Vue.component('time-ago', TimeAgo);

Then in components use as:

<time-ago :datetime="new Date()" tooltip/>

Contributions

locale translations: The component needs more locale translations. You can Open an issue to write the locale translations, or submit a pull request. See example here.

locale support list :

• English ( en )
• 繁體中文 ( zh_TW )
• 简体中文 ( zh_CN )
• 日本語 ( jp )
• Korean ( ko )
• Portugal(Brazil) ( pt_BR )
• Spain ( es )
• Arabia ( ar )
• French ( fr )
• Polish ( pl )
• Turkish ( tr )
• Indonesian ( id )
• Romanian ( ro )
• Russian ( ru )
• Germany ( de )
• Ukrainian ( uk )
• Bulgarian ( bg )
• Swedish ( se )
• Dutch / Netherlands ( nl )
• Hebrew ( he )
• Thai ( th )
• Danish ( da )
• Norwegian ( no )
• Vietnam ( vi )

Thanks for help:

vue2-timeago's Issues

tooltip不可用

Tag name is incorrect in README.md

Using the tag <time-ago> in HTML doesn't work, but <vue2-timeago> works.
Is README.md outdated? Or is it a bug?

make locale parameter accept objects - allow custom translation without using files

instead of publishing a public file to this repository it would be nice if the parameter locale could accept an object as input [containing all the translation definitions], allowing everyone to write and load custom translations

Locale translations for Hebrew

Hebrew support for time-ago

翻页时有问题

不知道怎么回事，在翻页的时候，时间显示的是第一页的数据，比如12条数据，第一页都是正常的，但第二页开始，前2条的时间数据是第一页的前两条。

我换了 vue-timeago 是没有问题的，请测试下。

Italian translation

function formatToLongString(time, type) {
  return `${time} ${type}${time > 1 ? 's' : ''} fa`
}

export default {
  short: {
    now: 'adesso',
    sec: 's',
    min: 'm',
    hour: 'o',
    day: 'g',
  },
  long: {
    now: 'adesso',
    sec: (time) => formatToLongString(time, 'secondi'),
    min: (time) => formatToLongString(time, 'minuti'),
    hour: (time) => formatToLongString(time, 'ore'),
    day: (time) => formatToLongString(time, 'giorni'),
  },
}

How to display seconds till minute

Polish translation

Below I paste the Polish translation. Thanks!

locale="pl"

function formatToLongString (time, type) {
  return ` ${time} ${type}${ time > 1 ? 's' : ''} temu`
}

export default {
  short: {
    now: 'przed chwilą',
    sec:'s',
    min: 'm',
    hour: 'g',
    day: 'd',
  },
  long: {
    now: 'przed chwilą',
    sec: time => formatToLongString(time, 'sekund'),
    min: time => formatToLongString(time, 'minut'),
    hour: time => formatToLongString(time, 'godzin'),
    day: time => formatToLongString(time, 'dni'),
  }
}

Install failure

[Locale] Arabic support

export default {
short: {
now: "قبل قليل",
sec: " ثانية",
min: " دقيقة",
hour: " ساعة",
day: " يوم"
},
long: {
now: "قبل قليل",
sec: " ثواني مضت",
min: " دقائق مضت",
hour: " ساعات مضت",
day: " أيام مضت"
}
}

Please note that we don't have the same as English. This means that instead of 5 minutes ago, we write before 5 minutes

There fore, if you can replace the $value with the time-left, it would be better. Otherwise, you can use the first list, which doesn't require you to reorder the logic of your code. The first list above uses the same as English. I prefer the second one.

Also, there's a difference between singular and plural. If you could implement this, please let me know so i can give you a better translation.

export default {
short: {
now: "قبل قليل",
sec: " ثانية",
min: " دقيقة",
hour: " ساعة",
day: " يوم"
},
long: {
now: "قبل قليل",
sec: " قبل $time ثواني",
min: " قبل $time دقائق",
hour: " قبل $time ساعات",
day: " قبل $time أيام"
}
}

Question: Formatting

Is it possible to get rid of the timestamp and just leave the "xxx min/days ago"

Russian translation

function formatToLongString (time, words) {
    let _time = time % 100;

    if (_time > 19) {
        _time = _time % 10;
    }

    switch ( _time ) {
        case 1: {
            return ` ${time} ${words[0]} назад`;
        }
        case 2: case 3: case 4: {
            return ` ${time} ${words[1]} назад`;
        }
        default: {
            return ` ${time} ${words[2]} назад`;
        }
    }
  }
  
  export default {
    short: {
      now: 'только что',
      sec:'с',
      min: 'м',
      hour: 'ч',
      day: 'дн',
    },
    long: {
      now: 'только что',
      sec: time => formatToLongString(time, ['секунда', 'секунды', 'секунд']),
      min: time => formatToLongString(time, ['минута', 'минуты', 'минут']),
      hour: time => formatToLongString(time, ['час', 'часа', 'часов']),
      day: time => formatToLongString(time, ['день', 'дня', 'дней']),
    }
  }

Romanian translation

file, ro.js

function formatToLongString (time, type) {
    if(type == 'zi')
        return ` ${time == 1 ? 'o ' : time} ${ time == 1 ? '' : 'e'} în urmă`
    
    return ` ${time == 1 ? 'o ' : time} ${type}${ time == 1 ? 'ă' : 'e'} în urmă`
  }
  
  export default {
    short: {
      now: 'chiar acum',
      sec:'s',
      min: 'm',
      hour: 'o',
      day: 'z',
    },
    long: {
      now: 'chiar acum',
      sec: time => formatToLongString(time, 'secund'),
      min: time => formatToLongString(time, 'minut'),
      hour: time => formatToLongString(time, 'or'),
      day: time => formatToLongString(time, 'zi'),
    }
  }

How it is related to vue-timeago from egoist

There is about 10x more popular package: vue-timeago created by egoist.

https://www.npmjs.com/package/vue-timeago

but now this repository is archived

https://github.com/egoist/vue-timeago

• Do you know why?
• Is this package inspired by vue-timeago, or totally other concept under the hood?

Critical dependency

WARNING in ./node_modules/vue2-timeago/dist/vue2-timeago.js 1:294-298
Critical dependency: the request of a dependency is an expression

Any idea how to fix that?