# 📆 useDate

useDate It is a function that we have completed date operations in functions.

# 🍁 Usage

useDate function import.

import { useDate } from 'vue-use-date';
const { format, timeAgo, getDate, utc, timezone, difference } = useDate('Type a here....');

# 🛠 Setup

# 🔑 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;
    },
  },
});

# 🔑 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');

# 💐 Example

You can see how it changes reactively using the example below.

Language: en

Format: Monday, June 14, 2021 8:19 AM

TimeAgo: 2 months ago

GetDate: 14

Difference: 1105

Utc: Monday, June 14, 2021 8:19 AM

Timezone: 06/14/2021 4:19 AM

# 🌟 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');