0.0.2 • Published 11 months ago

@congritta-ui/datepicker v0.0.2

Weekly downloads
-
License
-
Repository
github
Last release
11 months ago

@congritta-ui/datepicker

This is datepicker React component and part of Congritta UI

How to install

  1. Install @congritta-ui/base if you didn't it yet. (More info at: http://ui.congritta.com/docs/base);
  2. Install @congritta-ui/datepicker;

Add

import DatePicker from '@congritta-ui/datepicker';

into your code

How to use

Example:

export default function MyComponentWidthDatePicker() {
  const [value, setValue] = useState('2000-01-01'); // ISO Date

  return (
    <DatePicker value={value} onDateUpdate={setValue} />
  )
}

Props

Prop nameDescriptionIs RequiredDefault value
valueActive value (ISO String)true
onDateUpdateFunction that executes when user clicks on day in calendartrue
transitionDurationDuration in milliseconds to reveal or close calendarfalse210
gapBetweenInputWrapperAndCalendarGap between input wrapper and picker (in pixels)false10
monthNamesArray of month names. Useful for i18nfalseArray of months in English
weekDayNamesArray of weekday names. Useful for i18nfalseArray of weekdays in English
weekStartNumber of day that week starts from (0 for sunday)false0 (Sunday)
toHumanDateFunction that returns string formatted datefalse(date) => date.toLocaleDateString()
datePickerClassNameClass name for DatePicker component wrapper for adding additional stylesfalse
inputWrapperClassNameClass name for input wrapper for adding additional stylesfalse
timePeriodSelectorClassNameClass name for time period selector for adding additional stylesfalse
calendarDaysGridClassNameClass name for calendar days wrapper for adding additional stylesfalse
calendarDayClassNameClass name for calendar day cell for adding additional stylesfalse
arrowIconsvg component of arrow iconfalse<Internal icon>