vue-date-difference-component


Install

#### NPM
Install the package:

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

Then import it in your project

`js
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

`html


`

Usage

Simply use it like so:

`html

`

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:

$3

##### Single map
``html

Added
2 days ago

``

$3

All CSS is based upon this structure.

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

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

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

FAQ

- __How can I provide feedback?__ - Send an email to vrtich@profesia.sk; any feedback is appreciated.

Release History

- 0.0.2 Change babel preset to env`
- 0.0.1 Initial release