# @ant-extensions/super-date

> Ant React Extended - Super date selector

Latest version **0.0.7** (published 2021-02-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ant-extensions/super-date
pnpm add @ant-extensions/super-date
yarn add @ant-extensions/super-date
bun add @ant-extensions/super-date
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2021-02-25 |
| First published | 2020-04-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 168.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Adarsh Pastakia |
| Maintainers | adarshpastakia |
| Keywords | antd.4, superdate, relative date picker |

## Links

- npm: https://www.npmjs.com/package/@ant-extensions/super-date
- Repository: https://github.com/adarshpastakia/ant-extensions
- Homepage: https://github.com/adarshpastakia/ant-extensions#readme
- Issues: https://github.com/adarshpastakia/ant-extensions/issues
- npm.io page: https://npm.io/package/@ant-extensions/super-date

## Dependencies (7)

- [antd](https://npm.io/package/antd.md) ^4.12.3
- [react](https://npm.io/package/react.md) ^17.0.1
- [i18next](https://npm.io/package/i18next.md) ^19.9.0
- [date-fns](https://npm.io/package/date-fns.md) ^2.17.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [react-i18next](https://npm.io/package/react-i18next.md) ^11.8.8
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^4.5.0

## Recent versions

- 0.0.7 (latest) — 2021-02-25
- 0.0.6 — 2020-09-03
- 0.0.5 — 2020-08-12
- 0.0.4 — 2020-05-28
- 0.0.3 — 2020-05-10
- 0.0.2 — 2020-05-10
- 0.0.1 — 2020-04-27

## README

# Ant Extensions - Date Selector

### Date Selector for relative dates with DateMath

---

### Install


```shell
# Using npm
npm install @ant-extensions/super-date

# Using yarn
yarn add @ant-extensions/super-date
```

---

### Basic Usage

- RelativeRangePicker

```tsx
import React, { useState } from "react";
import { Form } from "antd";
import { ReactDateSelector } from "@ant-extensions/super-date";

export const Tester = () => {
  const [date, setDate] = useState<string | undefined>("$week|$now");

  return (
    <Form layout="inline">
      <Form.Item label="Date Selector">
        <ReactDateSelector value={date} onDateChange={setDate} allowClear />
      </Form.Item>
    </Form>
  );
};
```

> Component uses basic ant.design InputProps
>
> Props
>
> - `value`: `string`
> - `onDateChange`: `(date: string) => void`
> - `open`: `boolean`
> - `onVisibleChange`: `(open: boolean) => void`

---

- Util to parse date values and labels

```ts
import { DateUtils } from "@ant-extensions/super-date";

// Last 7 Days
DateUtils.label("$day-7");

// Last 7 Days ~ Now
DateUtils.label("$day-7|$now");

/**
 * @return [iso_date, iso_date]
 * Return string array of [start, end]
 */
DateUtils.parse("$day-7|$now");

/**
 * @return iso_date
 * Return single date string
 */
DateUtils.parse("$day-7");
```

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