@material-ui/pickers

@material-ui/pickers

Version 3.3.11
Published 1 year ago
1.49 MB
6 dependencies
MIT license

Install

npm i @material-ui/pickers

yarn add @material-ui/pickers

pnpm add @material-ui/pickers

Overview

React components, that implements material design pickers for material-ui v4

Variables

variable Calendar

const Calendar: React.ComponentType<any>;

variable Clock

const Clock: React.ComponentType<any>;

variable ClockView

const ClockView: React.FC<TimePickerViewProps>;

variable DatePicker

const DatePicker: any;

variable DateTimePicker

const DateTimePicker: any;

variable Day

const Day: React.FC<DayProps>;

variable KeyboardDatePicker

const KeyboardDatePicker: any;

variable KeyboardDateTimePicker

const KeyboardDateTimePicker: any;

variable KeyboardTimePicker

const KeyboardTimePicker: any;

variable MuiPickersContext

const MuiPickersContext: React.Context<any>;

variable MuiPickersUtilsProvider

const MuiPickersUtilsProvider: React.FC<MuiPickersUtilsProviderProps>;

variable Picker

const Picker: React.FunctionComponent<PickerProps>;

variable TimePicker

const TimePicker: any;

variable TimePickerView

const TimePickerView: React.NamedExoticComponent<TimePickerViewProps>;

Functions

function makePickerWithState

makePickerWithState: <T extends unknown>({
    Input,
    useState,
    useOptions,
    getCustomProps,
    DefaultToolbarComponent,
}: MakePickerOptions<T>) => React.FC<T>;

function useKeyboardPickerState

useKeyboardPickerState: (
    props: BaseKeyboardPickerProps,
    options: StateHookOptions
) => {
    inputProps: {
        format: string;
        inputValue: string;
        onChange: (value: string | null) => void;
        validationError: any;
        openPicker: () => false | void;
    };
    wrapperProps: {
        format: string;
        open: boolean;
        onClear: () => void;
        onAccept: () => void;
        onSetToday: () => void;
        onDismiss: () => void;
    };
    pickerProps: {
        date: MaterialUiPickersDate;
        onChange: (newDate: MaterialUiPickersDate, isFinish?: boolean) => void;
    };
};

function usePickerState

usePickerState: (
    props: BasePickerProps,
    options: StateHookOptions
) => {
    pickerProps: {
        date: MaterialUiPickersDate;
        onChange: (newDate: MaterialUiPickersDate, isFinish?: boolean) => void;
    };
    inputProps: {
        inputValue: string;
        validationError: import('react').ReactNode;
        openPicker: () => false | void;
    };
    wrapperProps: {
        format: string;
        open: boolean;
        onClear: () => void;
        onAccept: () => void;
        onSetToday: () => void;
        onDismiss: () => void;
    };
};

function useStaticState

useStaticState: ({
    value,
    autoOk,
    onChange,
    defaultFormat,
}: StaticStateOpts) => {
    pickerProps: {
        date: MaterialUiPickersDate;
        onChange: (newDate: MaterialUiPickersDate, isFinish?: boolean) => void;
    };
    wrapperProps: {
        format: string;
        open: boolean;
        onClear: () => void;
        onAccept: () => void;
        onSetToday: () => void;
        onDismiss: () => void;
    };
    inputProps: {
        inputValue: string;
        validationError: import('react').ReactNode;
        openPicker: () => false | void;
    };
};

function useUtils

useUtils: () => IUtils<any>;

function validate

validate: (
    value: ParsableDate,
    utils: IUtils<any>,
    {
        maxDate,
        minDate,
        disablePast,
        disableFuture,
        maxDateMessage,
        minDateMessage,
        invalidDateMessage,
        strictCompareDates,
    }: Pick<
        DatePickerProps,
        | 'children'
        | 'ref'
        | 'label'
        | 'select'
        | 'style'
        | 'title'
        | 'value'
        | 'className'
        | 'innerRef'
        | 'key'
        | 'defaultChecked'
        | 'defaultValue'
        | 'suppressContentEditableWarning'
        | 'suppressHydrationWarning'
        | 'accessKey'
        | 'contentEditable'
        | 'contextMenu'
        | 'dir'
        | 'draggable'
        | 'hidden'
        | 'id'
        | 'lang'
        | 'placeholder'
        | 'slot'
        | 'spellCheck'
        | 'tabIndex'
        | 'radioGroup'
        | 'role'
        | 'about'
        | 'datatype'
        | 'inlist'
        | 'prefix'
        | 'property'
        | 'resource'
        | 'typeof'
        | 'vocab'
        | 'autoCapitalize'
        | 'autoCorrect'
        | 'autoSave'
        | 'color'
        | 'itemProp'
        | 'itemScope'
        | 'itemType'
        | 'itemID'
        | 'itemRef'
        | 'results'
        | 'security'
        | 'unselectable'
        | 'inputMode'
        | 'is'
        | 'aria-activedescendant'
        | 'aria-atomic'
        | 'aria-autocomplete'
        | 'aria-busy'
        | 'aria-checked'
        | 'aria-colcount'
        | 'aria-colindex'
        | 'aria-colspan'
        | 'aria-controls'
        | 'aria-current'
        | 'aria-describedby'
        | 'aria-details'
        | 'aria-disabled'
        | 'aria-dropeffect'
        | 'aria-errormessage'
        | 'aria-expanded'
        | 'aria-flowto'
        | 'aria-grabbed'
        | 'aria-haspopup'
        | 'aria-hidden'
        | 'aria-invalid'
        | 'aria-keyshortcuts'
        | 'aria-label'
        | 'aria-labelledby'
        | 'aria-level'
        | 'aria-live'
        | 'aria-modal'
        | 'aria-multiline'
        | 'aria-multiselectable'
        | 'aria-orientation'
        | 'aria-owns'
        | 'aria-placeholder'
        | 'aria-posinset'
        | 'aria-pressed'
        | 'aria-readonly'
        | 'aria-relevant'
        | 'aria-required'
        | 'aria-roledescription'
        | 'aria-rowcount'
        | 'aria-rowindex'
        | 'aria-rowspan'
        | 'aria-selected'
        | 'aria-setsize'
        | 'aria-sort'
        | 'aria-valuemax'
        | 'aria-valuemin'
        | 'aria-valuenow'
        | 'aria-valuetext'
        | 'dangerouslySetInnerHTML'
        | 'onCopy'
        | 'onCopyCapture'
        | 'onCut'
        | 'onCutCapture'
        | 'onPaste'
        | 'onPasteCapture'
        | 'onCompositionEnd'
        | 'onCompositionEndCapture'
        | 'onCompositionStart'
        | 'onCompositionStartCapture'
        | 'onCompositionUpdate'
        | 'onCompositionUpdateCapture'
        | 'onFocus'
        | 'onFocusCapture'
        | 'onBlur'
        | 'onBlurCapture'
        | 'onChange'
        | 'onChangeCapture'
        | 'onBeforeInput'
        | 'onBeforeInputCapture'
        | 'onInput'
        | 'onInputCapture'
        | 'onReset'
        | 'onResetCapture'
        | 'onSubmit'
        | 'onSubmitCapture'
        | 'onInvalid'
        | 'onInvalidCapture'
        | 'onLoad'
        | 'onLoadCapture'
        | 'onError'
        | 'onErrorCapture'
        | 'onKeyDown'
        | 'onKeyDownCapture'
        | 'onKeyPress'
        | 'onKeyPressCapture'
        | 'onKeyUp'
        | 'onKeyUpCapture'
        | 'onAbort'
        | 'onAbortCapture'
        | 'onCanPlay'
        | 'onCanPlayCapture'
        | 'onCanPlayThrough'
        | 'onCanPlayThroughCapture'
        | 'onDurationChange'
        | 'onDurationChangeCapture'
        | 'onEmptied'
        | 'onEmptiedCapture'
        | 'onEncrypted'
        | 'onEncryptedCapture'
        | 'onEnded'
        | 'onEndedCapture'
        | 'onLoadedData'
        | 'onLoadedDataCapture'
        | 'onLoadedMetadata'
        | 'onLoadedMetadataCapture'
        | 'onLoadStart'
        | 'onLoadStartCapture'
        | 'onPause'
        | 'onPauseCapture'
        | 'onPlay'
        | 'onPlayCapture'
        | 'onPlaying'
        | 'onPlayingCapture'
        | 'onProgress'
        | 'onProgressCapture'
        | 'onRateChange'
        | 'onRateChangeCapture'
        | 'onSeeked'
        | 'onSeekedCapture'
        | 'onSeeking'
        | 'onSeekingCapture'
        | 'onStalled'
        | 'onStalledCapture'
        | 'onSuspend'
        | 'onSuspendCapture'
        | 'onTimeUpdate'
        | 'onTimeUpdateCapture'
        | 'onVolumeChange'
        | 'onVolumeChangeCapture'
        | 'onWaiting'
        | 'onWaitingCapture'
        | 'onAuxClick'
        | 'onAuxClickCapture'
        | 'onClick'
        | 'onClickCapture'
        | 'onContextMenu'
        | 'onContextMenuCapture'
        | 'onDoubleClick'
        | 'onDoubleClickCapture'
        | 'onDrag'
        | 'onDragCapture'
        | 'onDragEnd'
        | 'onDragEndCapture'
        | 'onDragEnter'
        | 'onDragEnterCapture'
        | 'onDragExit'
        | 'onDragExitCapture'
        | 'onDragLeave'
        | 'onDragLeaveCapture'
        | 'onDragOver'
        | 'onDragOverCapture'
        | 'onDragStart'
        | 'onDragStartCapture'
        | 'onDrop'
        | 'onDropCapture'
        | 'onMouseDown'
        | 'onMouseDownCapture'
        | 'onMouseEnter'
        | 'onMouseLeave'
        | 'onMouseMove'
        | 'onMouseMoveCapture'
        | 'onMouseOut'
        | 'onMouseOutCapture'
        | 'onMouseOver'
        | 'onMouseOverCapture'
        | 'onMouseUp'
        | 'onMouseUpCapture'
        | 'onSelect'
        | 'onSelectCapture'
        | 'onTouchCancel'
        | 'onTouchCancelCapture'
        | 'onTouchEnd'
        | 'onTouchEndCapture'
        | 'onTouchMove'
        | 'onTouchMoveCapture'
        | 'onTouchStart'
        | 'onTouchStartCapture'
        | 'onPointerDown'
        | 'onPointerDownCapture'
        | 'onPointerMove'
        | 'onPointerMoveCapture'
        | 'onPointerUp'
        | 'onPointerUpCapture'
        | 'onPointerCancel'
        | 'onPointerCancelCapture'
        | 'onPointerEnter'
        | 'onPointerEnterCapture'
        | 'onPointerLeave'
        | 'onPointerLeaveCapture'
        | 'onPointerOver'
        | 'onPointerOverCapture'
        | 'onPointerOut'
        | 'onPointerOutCapture'
        | 'onGotPointerCapture'
        | 'onGotPointerCaptureCapture'
        | 'onLostPointerCapture'
        | 'onLostPointerCaptureCapture'
        | 'onScroll'
        | 'onScrollCapture'
        | 'onWheel'
        | 'onWheelCapture'
        | 'onAnimationStart'
        | 'onAnimationStartCapture'
        | 'onAnimationEnd'
        | 'onAnimationEndCapture'
        | 'onAnimationIteration'
        | 'onAnimationIterationCapture'
        | 'onTransitionEnd'
        | 'onTransitionEndCapture'
        | 'variant'
        | 'error'
        | 'name'
        | 'margin'
        | 'size'
        | 'open'
        | 'disabled'
        | 'type'
        | 'format'
        | 'orientation'
        | 'autoFocus'
        | 'autoComplete'
        | 'readOnly'
        | 'required'
        | 'rows'
        | 'fullWidth'
        | 'onMonthChange'
        | 'leftArrowIcon'
        | 'rightArrowIcon'
        | 'leftArrowButtonProps'
        | 'rightArrowButtonProps'
        | 'onClose'
        | 'onAccept'
        | 'okLabel'
        | 'cancelLabel'
        | 'clearLabel'
        | 'todayLabel'
        | 'clearable'
        | 'showTodayButton'
        | 'DialogProps'
        | 'PopoverProps'
        | 'hiddenLabel'
        | 'InputProps'
        | 'inputProps'
        | 'FormHelperTextProps'
        | 'helperText'
        | 'InputLabelProps'
        | 'inputRef'
        | 'multiline'
        | 'rowsMax'
        | 'SelectProps'
        | 'onOpen'
        | 'minDate'
        | 'maxDate'
        | 'disablePast'
        | 'disableFuture'
        | 'renderDay'
        | 'allowKeyboardControl'
        | 'shouldDisableDate'
        | 'loadingIndicator'
        | 'inputVariant'
        | 'TextFieldComponent'
        | 'initialFocusedDate'
        | 'autoOk'
        | 'minDateMessage'
        | 'maxDateMessage'
        | 'invalidDateMessage'
        | 'labelFunc'
        | 'invalidLabel'
        | 'emptyLabel'
        | 'disableToolbar'
        | 'ToolbarComponent'
        | 'strictCompareDates'
        | 'animateYearScrolling'
        | 'onYearChange'
    >
) => any;

Interfaces

interface BaseDatePickerProps

interface BaseDatePickerProps extends OutterCalendarProps {}

property animateYearScrolling

animateYearScrolling?: boolean;

To animate scrolling to current year (using scrollIntoView) false

property disableFuture

disableFuture?: boolean;

Disable future dates false

property disablePast

disablePast?: boolean;

Disable past dates false

property maxDate

maxDate?: ParsableDate;

Max selectable date Date(2100-01-01)

property minDate

minDate?: ParsableDate;

Min selectable date Date(1900-01-01)

property onYearChange

onYearChange?: (date: MaterialUiPickersDate) => void;

Callback firing on year change

property strictCompareDates

strictCompareDates?: boolean;

Compare dates by the exact timestamp, instead of start/end of date false

interface BaseTimePickerProps

interface BaseTimePickerProps {}

property ampm

ampm?: boolean;

12h/24h view for hour selection clock true

property minutesStep

minutesStep?: number;

Step over minutes 1

interface DatePickerViewsProps

interface DatePickerViewsProps extends BaseDatePickerProps {}

property openTo

openTo?: DatePickerView;

First view to show in DatePicker

property views

views?: DatePickerView[];

Array of views to show {Array<"year" | "date" | "month">}

interface DateTimePickerViewsProps

interface DateTimePickerViewsProps extends BaseDateTimePickerProps {}

property dateRangeIcon

dateRangeIcon?: React.ReactNode;

Date tab icon

property hideTabs

hideTabs?: boolean;

To show tabs

property openTo

openTo?: 'year' | 'date' | 'month' | 'hours' | 'minutes';

First view to show in DatePicker

property timeIcon

timeIcon?: React.ReactNode;

Time tab icon

property views

views?: ('year' | 'date' | 'month' | 'hours' | 'minutes')[];

Array of views to show

interface TimePickerViewsProps

interface TimePickerViewsProps extends BaseTimePickerProps {}

property openTo

openTo?: 'hours' | 'minutes' | 'seconds';

First view to show in timepicker

property views

views?: ('hours' | 'minutes' | 'seconds')[];

Array of views to show

Type Aliases

type BaseDateTimePickerProps

type BaseDateTimePickerProps = BaseTimePickerProps & BaseDatePickerProps;

type DatePickerProps

type DatePickerProps = WithPureInputProps & DatePickerViewsProps;

type DatePickerView

type DatePickerView = 'year' | 'date' | 'month';

type DateTimePickerProps

type DateTimePickerProps = WithPureInputProps & DateTimePickerViewsProps;

type DateTimePickerView

type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | 'minutes';

type KeyboardDatePickerProps

type KeyboardDatePickerProps = WithKeyboardInputProps & DatePickerViewsProps;

type KeyboardDateTimePickerProps

type KeyboardDateTimePickerProps = WithKeyboardInputProps & DateTimePickerViewsProps;

type KeyboardTimePickerProps

type KeyboardTimePickerProps = WithKeyboardInputProps & TimePickerViewsProps;

type TimePickerProps

type TimePickerProps = WithPureInputProps & TimePickerViewsProps;

Package Files (16)

Dependencies (6)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (5)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@material-ui/pickers.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@material-ui/pickers)

HTML

<a href="https://www.jsdocs.io/package/@material-ui/pickers"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 year ago.
Package analyzed in 3678 ms.
Missing or incorrect documentation? Open an issue for this package.