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

License

MIT License