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's design of this library. Give him your support.

check out the codesandbox link.

Install

with npm

$ npm i zaman

with yarn

$ yarn add zaman

Props

$3

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

$3

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

$3

| 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

$3

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

function App() {
return (
console.log(e.value)} />
)
}
`

$3

` jsx
import { DatePicker } from "zaman";

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

$3

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

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

return (

defaultValue={calendarValue}
onChange={(e) => setCalendarValue(new Date(e.value))}
/>

)
}
`

$3

` jsx
import { TimePicker } from "zaman";

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

License

MIT License