vue-use-date v1.0.3
:scroll: Documentation
You can find for more details, and docs on vue-use-date website.
:rocket: Introduction
It's easy to use Vue Use Date APIs to parse, validate, manipulate, and display dates and times. vue-use-date
.
:package: Installation
# install with yarn
yarn add vue-use-date or yarn add @vue/composition-api vue-use-date
# install with npm
npm install vue-use-date or npm install @vue/composition-api vue-use-date
:calendar: useDate
useDate
It is a function that we have completed date operations in functions.
:scroll: Documentation
Vue use date documentation
:maple_leaf: Usage
useDate
function import.
import { useDate } from 'vue-use-date';
const { format, timeAgo, getDate, utc, timezone, difference } = useDate('Type a here....');
:hammer_and_wrench: Setup
:key: Step 1
src/dayjs.js
Open a file named as dayjs.js
inside the folder of src
and add the codes below. The reason adding dayjs.js
file is customizability of dayjs
library.
dayjs.js
import Vue from 'vue';
import dayjs from 'dayjs';
// For the other language options, add "dayjs/locale/{langCode}"
import 'dayjs/locale/tr';
import 'dayjs/locale/ar';
import relativeTime from 'dayjs/plugin/relativeTime';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(relativeTime);
dayjs.extend(localizedFormat);
dayjs.extend(utc);
dayjs.extend(timezone);
Object.defineProperties(Vue.prototype, {
$dayjs: {
get() {
return dayjs;
},
},
});
:key: Step 2
Import dayjs.js
file inside main.js
main.js
import Vue from 'vue';
import App from './App.vue';
import VueCompositionApi from '@vue/composition-api';
// "dayjs.js" imported
import './dayjs.js';
Vue.use(VueCompositionApi);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
:rocket: Example
Example.vue
<template>
<div id="app">
<p>{{ dateFormat }}</p>
<p>{{ timeAgoFormat }}</p>
<p>{{ getDateFormat }}</p>
<p>{{ differenceFormat }}</p>
<p>{{ utcFormat }}</p>
<p>{{ timezoneFormat }}</p>
</div>
</template>
<script>
import {ref, computed} from '@vue/composition-api'
import { useDate } from "vue-use-date";
export default {
name: "Examples",
setup(props) {
const date = new Date();
const langUnit = ref('en')
// The useDate function is added and the desired properties are used.
// The parameter sent from useDate represents the language option.
const { format, timeAgo, getDate, utc, timezone, difference } = useDate(langUnit);
const dateFormat = computed(() => format(date, 'LLLL')); // Friday, April 9, 2021 11:47 PM
const timeAgoFormat = computed(() => timeAgo(date, '2021-04-07:23:00')) // 2 days ago
const getDateFormat = computed(() => getDate('date')); // 10
const differenceFormat = computed(() => difference(date, '2018-06-05', 'day')); // 1400
const utcFormat = computed(() => utc(date, 'LLLL'));
const timezoneFormat = computed(() => timezone('2014-06-01 12:00', 'America/New_York', 'L LT'));
return {
dateFormat,
timeAgoFormat,
getDateFormat,
differenceFormat,
utcFormat,
timezoneFormat
};
}
};
</script>
:star2: Features
format() Func
is used to format sent date. Gets two parameters. First one is the date that is going to be formatted, second one is format style.
const dateFormat = format(date, 'dddd'); // Friday, April 9, 2021 11:47 PM
const dateFormat = format(date, 'YYYY'); // 2021
const dateFormat = format(date, 'MMM'); // Jan-Dec
Format | Output | Description |
---|---|---|
YY | 18 | Two-digit year |
YYYY | 2018 | Four-digit year |
M | 1-12 | The month, beginning at 1 |
MM | 01-12 | The month, 2-digits |
MMM | Jan-Dec | The abbreviated month name |
MMMM | January-December | The full month name |
D | 1-31 | The day of the month |
DD | 01-31 | The day of the month, 2-digits |
d | 0-6 | The day of the week, with Sunday as 0 |
dd | Su-Sa | The min name of the day of the week |
ddd | Sun-Sat | The short name of the day of the week |
dddd | Sunday-Saturday | The name of the day of the week |
H | 0-23 | The hour |
HH | 00-23 | The hour, 2-digits |
h | 1-12 | The hour, 12-hour clock |
hh | 01-12 | The hour, 12-hour clock, 2-digits |
m | 0-59 | The minute |
mm | 00-59 | The minute, 2-digits |
s | 0-59 | The second |
ss | 00-59 | The second, 2-digits |
SSS | 000-999 | The millisecond, 3-digits |
Z | +05:00 | The offset from UTC, ±HH:mm |
ZZ | +0500 | The offset from UTC, ±HHmm |
A | AM PM | |
a | am pm |
List of localized formats
Format | English Locale | Sample Output |
---|---|---|
LT | h:mm A | 8:02 PM |
LTS | h:mm:ss A | 8:02:18 PM |
L | MM/DD/YYYY | 08/16/2018 |
LL | MMMM D, YYYY | August 16, 2018 |
LLL | MMMM D, YYYY h:mm A | August 16, 2018 8:02 PM |
LLLL | dddd, MMMM D, YYYY h:mm A | Thursday, August 16, 2018 8:02 PM |
l | M/D/YYYY | 8/16/2018 |
ll | MMM D, YYYY | Aug 16, 2018 |
lll | MMM D, YYYY h:mm A | Aug 16, 2018 8:02 PM |
llll | ddd, MMM D, YYYY h:mm A | Thu, Aug 16, 2018 8:02 PM |
Sample
const dateFormat = format(date, 'LLLL'); // Friday, April 9, 2021 9:23 PM
const dateFormat = format(date, 'llll'); // Fri, Apr 9, 2021 9:23 PM
const dateFormat = format(date, 'll'); // Apr 9, 2021
getDate() Func
const getDateFormat = getDate('date'); // date => Ayın Tarihi
Uni | Shorted | Description |
---|---|---|
date | D | Date of Month |
day | d | Day of Week (Sunday as 0, Saturday as 6) |
month | M | Month (January as 0, December as 11) |
year | y | Year |
hour | h | Hour |
minute | m | Minute |
second | s | Second |
milisecond | ms | Millisecond |
difference() Func
Gives the difference of two dates according to the determined time unit.
Gets three parameters
1- First Date
2- Second Date
3- Time Unit
// It tells you how many days are between two dates.
const differenceFormat = difference(date1, date2, 'day');
// Reports how many months are between two dates.
const differenceFormat = difference(date1, date2, 'mount');
utc() Func
Gets two parameters. First one is the sent date, second one is date format unit.
const utcFormat = utc(date, 'llll');
timezone() Func
It takes 3 parameters.
1- Date
2- Location
3- Format Unit
const timezoneFormat = timezone('2014-06-01 12:00', 'Europe/Istanbul', 'LLLL');
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago