iranian-date-picker

iranian-date-picker is a lightweight React component for creating a Jalali/Georgian datepicker. There is also a range datepicker and timepicker in iranian-date-picker. The module can also be customized to match the appearance of your designs.

Install

with npm

$ npm i iranian-date-picker

with yarn

$ yarn add iranian-date-picker

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 'iranian-date-picker'

function App() {
  return <DatePicker onChange={(e) => console.log(e.value)} />
}

Range date picker

import { DatePicker } from 'iranian-date-picker'

function App() {
  return <DatePicker onChange={(e) => console.log(e.from, e.to)} range />
}

Calendar

import { Calendar, CalendarProvider } from 'iranian-date-picker'

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 'iranian-date-picker'

function App() {
  return (
    <TimePicker
      onChange={(e) => console.log(e.hour, e.minute, e.timeConvention)}
    />
  )
}

License

MIT License