# @react-shamsi/timepicker

> Let's start by displaying a very simple Jalali date picker using react-jalali. We do it by import the styles and the component itself like so:

Latest version **0.1.1** (published 2024-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @react-shamsi/timepicker
pnpm add @react-shamsi/timepicker
yarn add @react-shamsi/timepicker
bun add @react-shamsi/timepicker
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2024-08-10 |
| First published | 2022-10-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 19.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kasraghoreyshi |

## Links

- npm: https://www.npmjs.com/package/@react-shamsi/timepicker
- npm.io page: https://npm.io/package/@react-shamsi/timepicker

## Dependencies (6)

- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [@mantine/hooks](https://npm.io/package/@mantine/hooks.md) ^5.6.2
- [date-fns-jalali](https://npm.io/package/date-fns-jalali.md) ^2.29.3-0
- [persian-helpers](https://npm.io/package/persian-helpers.md) ^0.1.2
- [@floating-ui/react-dom](https://npm.io/package/@floating-ui/react-dom.md) ^1.0.0
- [@floating-ui/react-dom-interactions](https://npm.io/package/@floating-ui/react-dom-interactions.md) ^0.10.2

## Recent versions

- 0.1.1 (latest) — 2024-08-10
- 0.1.0 — 2024-08-10
- 0.0.2 — 2022-10-28
- 0.0.1 — 2022-10-28

## README

## Jalali date picker

Let's start by displaying a very simple Jalali date picker using react-jalali. We do it by import the styles and the component itself like so:

```jsx
import { DatePicker } from "@react-shamsi/datepicker";
import "@react-shamsi/calendar/dist/styles.css";
import "@react-shamsi/datepicker/dist/styles.css";

export default function Example() {
  return <DatePicker />;
}
```

### Configuration

Now we are going to explore every single prop that could be passed to DatePicker.
| Prop name | Description | Default value
|--|--| --|
|autoUpdate|Automatically updates the input whenever the user changes the active date. This means that the confirm button won't be needed for saving the date anymore.| false|
|defaultDate| The date that will be displayed on the input by default| n/a |
|calendarProps| Every prop for configuring the calendar component| n/a|
|date| Changes the date in a controlled manner | n/a |
|dateFormat| The format that the date will be displayed in | "yyyy/MM/dd" |
|onChange|Function that gets called whenever the user selects a date. The new date will be passed as it's argument| n/a |
|persianDigits|Will convert the input's date to persian digits|false|
|...Input element props| Every other prop that can be passed to an input can be also passed to this component.| n/a |

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