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)}
/>
)
}