vue-date-difference-component

Install

NPM

Install the package:

npm install @profesia/vue-date-difference-component --save-dev

Then import it in your project

import Vue from 'vue'
import paginate from '@profesia/vue-date-difference-component'

new Vue({
    el: '#app',
    
    components: {
        dateDifference,
    },
});

Browser global

Just include vue & date_difference

<script src="path/to/vue.js"></script>
<script src="path/to/dist/js/date_difference.min.js"></script>

Usage

Simply use it like so:

<date-difference :addDate="item.addDate"  :lastUpdated="item.updateDate" :lang="item.languageFlag"></date-difference>

Options

addDate

Mandatory. String. Date of creation in MYSQL string format Y-m-d H:i:s.

lastUpdated

Optional. String. If this date is filled, the date difference is counting from this date. If showAction is true and lastUpdated is different from addDate, the component will display updated string, else there will be added string. Defaults to ''.

showAction

Optional. Boolean. If true, the component will display added or updated string in the front. Defaults to false.

lang

Optional. String. Select strings language - you can choose from en, de, hu, cz and sk. Defaults to en.

strings

Object. You can set your own string, or use defaults. If own, use the structure of default strings (don't forget to set right language)

{
    en: {
        added: 'Added',
        updated: 'Updated',
        today: 'today',
        yesterday: 'yesterday',
        before2days: 'the day before yesterday',
        beforeXdays: 'days ago',
        // if you need to set string before number and after number, use these
        before: 'before',
        days: 'days',
        before7Days: 'a week ago',
        before14Days: '2 weeks ago',
        before30Days: 'a month ago'
    }
}

Structure

Once the select has been rendered, it will create the following structure:

HTML

Single map

<span class="vue-date-difference-component">
    <span class="vue-date-difference-action">Added</span>
    <span class="vue-date-difference-days">2 days ago</span>
</span>

CSS

All CSS is based upon this structure.

.vue-date-difference-component {
  ...
}

.vue-date-difference-action {
  ...
}

.vue-date-difference-days {
  ...
}

FAQ

• How can I provide feedback? - Send an email to [email protected]; any feedback is appreciated.

Release History

• 0.0.2 Change babel preset to env
• 0.0.1 Initial release