# vue-dayjs

> Handy dayjs(2KB immutable date library alternative to Moment.js) filters and directives for Vue.js

Latest version **1.0.2** (published 2018-05-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-dayjs
pnpm add vue-dayjs
yarn add vue-dayjs
bun add vue-dayjs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-05-10 |
| First published | 2018-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | linyupark@gmail.com |
| Maintainers | linyupark |
| Keywords | Vue, dayjs, moment, esm |

## Links

- npm: https://www.npmjs.com/package/vue-dayjs
- npm.io page: https://npm.io/package/vue-dayjs

## Dependencies (1)

- [dayjs](https://npm.io/package/dayjs.md) ^1.5.24

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2018-05-10
- 1.0.1 — 2018-05-10
- 1.0.0 — 2018-05-10

## README

# vue-dayjs

> Handy [Day.js](https://www.npmjs.com/package/dayjs) filters and directives for [Vue.js](http://vuejs.org/)

> Day.js is a minimalist (Fast 2kB) JavaScript library for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.

### How to use

```js
import Dayjs from 'vue-dayjs';

Vue.use(Dayjs, {
  // language set, default cn
  lang?: cn | en,
  /**
   * addon filters { key: filter name }
   * if set {} will only dayjs base filter can use.
   */
  filters?: {
    ago: 'ago',
    ...
  },
  /**
   * addon directives { key: directives name }
   * set {} to disable.
   */
  directives?: {
    countdown: 'countdown',
    ...
  }
});

new Vue({...});
```

`Notice` this plugin esm format only and it will take effect automatic.

## Filtering Methods

### Format
```js
<span>{{ someDate | dayjs('YYYY-MM-DD') }}</span>
```

### Add
```js
<span>{{ someDate | dayjs('add', 1, 'day') }}</span>
```

### Subtract
```js
<span>{{ someDate | dayjs('subtract', 1, 'day') }}</span>
```

### Unix Timestamp (milliseconds)
```js
<span>{{ someDate | dayjs('valueOf') }}</span>
```

### Unix Timestamp (seconds)
```js
<span>{{ someDate | dayjs('unix') }}</span>
```

### Days in Month
```js
<span>{{ someDate | dayjs('daysInMonth') }}</span>
```

### As JSON
```js
<span>{{ someDate | dayjs('toJSON') }}</span>
```

### As Array
```js
<span>{{ someDate | dayjs('toArray') }}</span>
```

### As Object
```js
<span>{{ someDate | dayjs('toObject') }}</span>
```

### Is Leap Year
```js
<span>{{ someDate | dayjs('isLeapYear') }}</span>
```

### Difference
```js
<span>{{ someDate | dayjs('diff', anotherDate) }}</span>
```

### Addon filter : xx ago
```js
<span>{{ someDate | ago }}</span>
```

### Addon directive : countdown
```js
<v-countdown="{target: someDate, format: 'DD days HH:mm:ss'}" />
```

### Method inject

Also can use dayjs in your logic layer.
```js
created() {
  this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
}
```

---
_Source: https://npm.io/package/vue-dayjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._