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.
I appreciate Ali Samandar's design of this library. Give him your support.
check out the codesandbox link.
with npm
$ npm i zaman
with yarn
$ yarn add zaman
| 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 |
| 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 |
| 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 |
import { DatePicker } from "zaman";
function App() {
return (
<DatePicker onChange={(e) => console.log(e.value)} />
)
}import { DatePicker } from "zaman";
function App() {
return (
<DatePicker onChange={(e) => console.log(e.from, e.to)} range />
)
}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>
)
}import { TimePicker } from "zaman";
function App() {
return (
<TimePicker
onChange={(e) => console.log(e.hour, e.minute, e.timeConvention)}
/>
)
}
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent