# @uiw/formatter

> Get a formatted date.

Latest version **2.0.2** (published 2023-04-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @uiw/formatter
pnpm add @uiw/formatter
yarn add @uiw/formatter
bun add @uiw/formatter
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2023-04-05 |
| First published | 2018-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Kenny Wang |
| Maintainers | uiwjs, wcjiang |
| Keywords | date-formatter, formatter, date, uiw |

## Links

- npm: https://www.npmjs.com/package/@uiw/formatter
- Repository: https://github.com/uiwjs/date-formatter
- Homepage: https://github.com/uiwjs/date-formatter#readme
- Issues: https://github.com/uiwjs/date-formatter/issues
- npm.io page: https://npm.io/package/@uiw/formatter

## 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

- 2.0.2 (latest) — 2023-04-05
- 1.3.5 (previous) — 2022-11-25
- 2.0.1 — 2022-12-10
- 2.0.0 — 2022-11-24
- 1.3.4 — 2022-11-24
- 1.3.3 — 2022-04-14
- 1.3.2 — 2022-01-24
- 1.3.1 — 2022-01-13
- 1.3.0 — 2022-01-13
- 1.2.4 — 2019-11-28
- 1.2.3 — 2019-06-20
- 1.2.2 — 2019-06-20
- 1.2.0 — 2019-03-07
- 1.1.4 — 2019-03-07
- 1.1.3 — 2019-03-07
- … 3 more at https://npm.io/package/@uiw/formatter/versions

## README

Formatter
===

[![GitHub Actions Build formatter](https://github.com/uiwjs/date-formatter/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/date-formatter/actions/workflows/ci.yml) [![](https://img.shields.io/npm/v/@uiw/formatter)](https://www.npmjs.com/package/@uiw/formatter) [![](https://img.shields.io/bundlephobia/min/@uiw/formatter)](https://www.npmjs.com/package/@uiw/formatter) ![](http://jaywcjlove.github.io/sb/status/no-dependencies.svg) [![Coverage Status](https://coveralls.io/repos/github/uiwjs/date-formatter/badge.svg?branch=master)](https://coveralls.io/github/uiwjs/date-formatter?branch=master)
[![npm downloads](https://img.shields.io/npm/dm/@uiw/formatter.svg?style=flat)](https://www.npmjs.com/package/@uiw/formatter)

Get a formatted date.

[![Demo preview in CodePen](https://shields.io/badge/Demo%20Open%20in-CodePen-success?logo=codepen&style=flat)](https://codepen.io/jaywcjlove/pen/zbZKmq)
[![Demo preview in CodeSandbox](https://shields.io/badge/Demo%20Open%20in-CodeSandbox-success?logo=codesandbox&style=flat)](https://codesandbox.io/s/date-formatter-demo-jib1u)

### Install

```bash
$ npm install --save @uiw/formatter
```

### Usage

```js
import formatter from '@uiw/formatter';

console.log(formatter());
//=> 2019-03-07

console.log(formatter.utc());
//=> 2019-03-07

console.log(formatter('YYYY年MM月DD日', new Date(2019, 3, 7)))
//=> 2019年04月07日
console.log(formatter('YYYY年MM月DD日 16:30:29', new Date(2019, 3, 7, 16, 30, 29)))
//=> 2019年04月07日 16:30:29
console.log(formatter('YYYY年MM月DD日 HH:mm-ss', new Date(2019, 3, 7, 16, 30, 29)))
//=> 2019年04月07日 16:30-29
console.log(formatter('YYYY/MM/DD HH:mm:ss', new Date(2019, 3, 7, 16, 30, 29)))
//=> 2019年04月07日 16:30-29
console.log(formatter('YYYY/MM/DD HH:mm:ss', new Date(2019, 3, 7, 16, 30, 29)))
//=> 2019/04/07 16:30:29


console.log(formatter('YYYY'));
//=> 2019
console.log(formatter.utc('YYYY'));
//=> 2019
```

Or manually download and link **formatter.js** in your HTML, It can also be downloaded via [UNPKG](https://unpkg.com/@uiw/formatter):

```html
<div id="date"></div>
<script src="https://unpkg.com/@uiw/formatter/dist/formatter.min.js"></script>
<script>
  document.getElementById('date').innerHTML = formatter();
</script>
```

The above [example preview](https://codepen.io/jaywcjlove/pen/zbZKmq).

### timeZoneConverter

Resolve changes in time zone, resulting in inaccurate display server time

```js
function timeZoneConverter(date, timeZone) {
  const oldDate = new Date(date);
  const newDate = new Date();
  const stamp = oldDate.getTime();
  if (!timeZone) return oldDate;
  return (isNaN(timeZone) && !timeZone)
    ? oldDate :
    new Date(stamp + (newDate.getTimezoneOffset() * 60 * 1000) + (timeZone * 60 * 60 * 1000));
}
timeZoneConverter(new Date(1434701732*1000), 8)
```

## API

```js
formatter(rule: String, date: Date, utc: Boolean);
formatter.utc(rule: String, date: Date);
```

## Supported Patterns

| rule | Description | 中文说明 | E.g |
|--------- |-------- |--------- |-------- |
| `YYYY` | full year | 年 | `2019` |
| `MM` | month | 月 | `02` |
| `DD` | day | 天 | `05` |
| `HH` | hours | 时 | `12` |
| `mm` | minutes | 分钟 | `59` |
| `ss` | seconds | 秒 | `09` |
| `ms` | milliseconds | 毫秒 | `532` |

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