2.1.1 • Published 1 year ago

zaman v2.1.1

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

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

propstypedefault
defaultValuetimestamp | Date | Dayjsundefined
weekendnumber[]undefined
roundstring one of thin | x1 | x2 | x3 | x4thin
accentColorstring#0D59F2
localestring one of fa | enfa
directionstring one of rtl | ltrrtl
onChangefunctionundefined
rangebooleanfalse
fromtimestamp | Date | Dayjsundefined
totimestamp | Date | Dayjsundefined
showbooleanfalse
inputClassstringnull
inputAttributesobject of InputHTMLAttributesnull
classNamestringnull
customShowDateFormatstring ex: YYYY MMMM DD or DD/MM etc.undefined
positionright | left | centerright

Calendar Provider

propstypedefault
roundstring one of thin | x1 | x2 | x3 | x4thin
accentColorstring#0D59F2
localestring one of fa | enfa
directionstring one of rtl | ltrrtl
childrenReactNodenull

Time Picker

propstypedefault
defaultValuetimestamp | Date | DayjsDate
roundstring one of thin | x1 | x2 | x3 | x4thin
accentColorstring#0D59F2
localestring one of fa | enfa
clockTimenumber one of 12 | 2424
inputClassstringnull
inputAttributesobject of InputHTMLAttributesnull

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

2.1.1

1 year ago

2.1.0-beta

1 year ago

2.1.0

1 year ago

2.1.0-beta-03

1 year ago

2.0.9

1 year ago

2.0.9-n

1 year ago

2.0.9-beta-01

1 year ago

2.0.8-beta

1 year ago

2.0.8

1 year ago

2.0.8-beta-01

1 year ago

2.0.4-beta

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.3-beta

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.0-beta

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

2.1.0-beta-02

2 years ago

2.1.0-beta-01

2 years ago

2.0.5-beta

2 years ago

2.0.2-beta

2 years ago

2.0.6-beta-01n

2 years ago

2.0.6-beta-01

2 years ago

1.0.0-beta

2 years ago

2.0.6-beta-02

2 years ago

2.0.1-beta

2 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.2

4 years ago

1.0.3

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago