Skip to content

rzkhosroshahi/zaman

Repository files navigation

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