A Vue Component Used to format Date with Time Ago Statement

A Vue Component Used to format Date with Time Ago Statement

vue2-timeago .A vue component used to format date with time ago statement

vue2-timeago

  • 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

Live Demo

Edit vue2_timeago_demo

Installation

Get from npm / yarn:

npm i vue2-timeago
yarn add vue2-timeago

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

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

Usage

Use this inside your app:

import TimeAgo from 'vue2-timeago'

export default {
  name: 'app',
  components: {
    TimeAgo,
  }
}
With Default CSS

####### You don't need include for version >= "1.2.2"

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
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="right"></time-ago> Set placement
5. long
<time-ago :datetime="datetime"></time-ago> show : 2d
<time-ago :datetime="datetime" long></time-ago> show : 2 days ago
6. todo

You can do something when time refresh every time

<time-ago :refresh="1" :locale="locale" :todo="()=> count+=1"></time-ago>
7. native event
<time-ago @click.native="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, String false Show tooltip.
todo Function false You can call a function when time refresh every time.

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 )
  • 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 )

Thanks for help:

Download Details:

Author: runkids

Demo: https://codesandbox.io/embed/myomwvkojj

Source Code: https://github.com/runkids/vue2-timeago

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.