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
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 |
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 |
Usages
Date picker
import { DatePicker } from "zaman";
function App() {
return (
<DatePicker onChange={(e) => console.log(e.value)} />
)
}Range date picker
import { DatePicker } from "zaman";
function App() {
return (
<DatePicker onChange={(e) => console.log(e.from, e.to)} range />
)
}Calendar
import { Calendar, CalendarProvider } from "zaman";
function App() {
const [calendarValue, setCalendarValue] = useState(new Date())
return (
<CalendarProvider>
<Calendar
defaultValue={calendarValue}
onChange={(day) => setCalendarValue(new Date(day))}
/>
</CalendarProvider>
)
}Time picker
import { TimePicker } from "zaman";
function App() {
return (
<TimePicker
onChange={(e) => console.log(e.hour, e.minute, e.timeConvention)}
/>
)
}