React component that helps you to makes simple Farsi/Jalali/Shamsi date picker. It also has range date picker you can select multiple days in multiple months.
npm install zamanZaman 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.
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 |
`` jsx
import { DatePicker } from "zaman";
function App() {
return (
)
}
`
` jsx
import { DatePicker } from "zaman";
function App() {
return (
)
}
`
` jsx
import { Calendar, CalendarProvider } from "zaman";
function App() {
const [calendarValue, setCalendarValue] = useState(new Date())
return (
onChange={(e) => setCalendarValue(new Date(e.value))}
/>
)
}
`
` jsx
import { TimePicker } from "zaman";
function App() {
return (
/>
)
}
``