# Zaman

Zaman is a lightweight React component for creating a Jalali/Georgian datepicker. There is also a range datepicker and timepicker in Zaman. The module can also be customized to match the appearance of your designs.

#### Design

I appreciate [Ali Samandar](https://dribbble.com/eanlami)'s design of this library. Give him your support.

check out the [codesandbox link.](https://codesandbox.io/s/new-version-date-picker-6eeepf)
## Install

with npm

`$ npm i zaman`

with yarn

`$ yarn add zaman`

## Props
### Date Picker and Calendar

| props                | type                                                       | default   |
|----------------------|------------------------------------------------------------|-----------|
| defaultValue         | timestamp | Date | Dayjs                         | undefined |
| weekend              | number[]                                                   | undefined |
| round                | string one of thin | x1 | x2 | x3 | x4 | thin      |
| accentColor          | string                                                     | #0D59F2   |
| locale               | string one of fa | en                                 | fa        |
| direction            | string one of rtl | ltr                               | rtl       |
| onChange             | function                                                   | undefined |
| range                | boolean                                                    | false     |
| from                 | timestamp | Date | Dayjs                         | undefined |
| to                   | timestamp | Date | Dayjs                         | undefined |
| show                 | boolean                                                    | false     |
| inputClass           | string                                                     | null      |
| inputAttributes      | object of InputHTMLAttributes                              | null      |
| className            | string                                                     | null      |
| customShowDateFormat | string  ex: YYYY MMMM DD or DD/MM etc.                     | undefined |
| position             | right | left  | center                           | right     |


### Calendar Provider

| props       | type                                                       | default |
|-------------|------------------------------------------------------------|---------|
| round       | string one of thin | x1 | x2 | x3 | x4 | thin    |
| accentColor | string                                                     | #0D59F2 |
| locale      | string one of fa | en                                 | fa      |
| direction   | string one of rtl | ltr                               | rtl     |
| children    | ReactNode                                                  | null    |



### Time Picker

| props           | type                                                       | default |
|-----------------|------------------------------------------------------------|---------|
| defaultValue    | timestamp | Date | Dayjs                         | Date    |
| round           | string one of thin | x1 | x2 | x3 | x4 | thin    |
| accentColor     | string                                                     | #0D59F2 |
| locale          | string one of fa | en                                 | fa      |
| clockTime       | number one of 12 | 24                                 | 24      |
| inputClass      | string                                                     | null    |
| inputAttributes | object of InputHTMLAttributes                              | null    |

## Usages
### Date picker

``` jsx
import { DatePicker } from "zaman";

function App() {
  return (
    <DatePicker onChange={(e) => console.log(e.value)} />
  )
}
```

### Range date picker

``` jsx
import { DatePicker } from "zaman";

function App() {
  return (
    <DatePicker onChange={(e) => console.log(e.from, e.to)} range />
  )
}
```

### Calendar

``` jsx
import { Calendar, CalendarProvider } from "zaman";

function App() {
  const [calendarValue, setCalendarValue] = useState(new Date())

  return (
    <CalendarProvider>
      <Calendar
        defaultValue={calendarValue}
        onChange={(e) => setCalendarValue(new Date(e.value))}
      />
    </CalendarProvider>
  )
}
```


### Time picker

``` jsx
import { TimePicker } from "zaman";

function App() {
  return (
    <TimePicker
      onChange={(e) => console.log(e.hour, e.minute, e.timeConvention)}
    />
  )
}
```

## License


[MIT License](https://github.com/rzkhosroshahi/zaman/blob/main/LICENSE)