My-Zaman
My-Zaman is a temporary package developed based on Zaman library, added today button to handle navigate to current date and marked current day on calendar. It's temporarily published due to personal requirements and will be available until the new changes is released in main library named 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 |
customShowDateFormat | string ex: YYYY MMMM DD or DD/MM etc. | undefined |
position | right | left | center | right |
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 |
inputClass | string | null |
inputAttributes | object of InputHTMLAttributes | null |
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={(e) => setCalendarValue(new Date(e.value))}
/>
</CalendarProvider>
)
}
Time picker
import { TimePicker } from "zaman";
function App() {
return (
<TimePicker
onChange={(e) => console.log(e.hour, e.minute, e.timeConvention)}
/>
)
}