Nuclear Pizza Machine

    @dselmanovic/rc-picker

    1.0.0 • Public • Published

    rc-picker

    NPM version build status Codecov Dependencies DevDependencies npm download bundle size

    Live Demo

    https://react-component.github.io/picker/

    Install

    rc-picker

    Usage

    import Picker from 'rc-picker';
    import 'rc-picker/assets/index.css';
    import { render } from 'react-dom';
    
    render(<Picker />, mountNode);

    API

    Picker

    Property Type Default Description
    prefixCls String rc-picker prefixCls of this component
    className String '' additional css class of root dom node
    style React.CSSProperties additional style of root dom node
    dropdownClassName String '' additional className applied to dropdown
    dropdownAlign Object:alignConfig of dom-align value will be merged into placement's dropdownAlign config
    popupStyle React.CSSProperties customize popup style
    transitionName String '' css class for animation
    locale Object import from 'rc-picker/lib/locale/en_US' rc-picker locale
    inputReadOnly Boolean false set input to read only
    allowClear Boolean false whether show clear button
    autoFocus Boolean false whether auto focus
    showTime Boolean | Object showTime options to provide an additional time selection
    picker time | date | week | month | year control which kind of panel should be shown
    format String | String[] depends on whether you set timePicker and your locale use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display
    use12Hours Boolean false 12 hours display mode
    value moment current value like input's value
    defaultValue moment defaultValue like input's defaultValue
    open Boolean false current open state of picker. controlled prop
    suffixIcon ReactNode The custom suffix icon
    clearIcon ReactNode The custom clear icon
    prevIcon ReactNode The custom prev icon
    nextIcon ReactNode The custom next icon
    superPrevIcon ReactNode The custom super prev icon
    superNextIcon ReactNode The custom super next icon
    disabled Boolean false whether the picker is disabled
    placeholder String picker input's placeholder
    getPopupContainer function(trigger) to set the container of the floating layer, while the default is to create a div element in body
    onChange Function(date: moment, dateString: string) a callback function, can be executed when the selected time is changing
    onOpenChange Function(open:boolean) called when open/close picker
    onFocus (evnet:React.FocusEventHandler) => void called like input's on focus
    onBlur (evnet:React.FocusEventHandler) => void called like input's on blur
    direction String: ltr or rtl Layout direction of picker component, it supports RTL direction too.

    PickerPanel

    Property Type Default Description
    prefixCls String rc-picker prefixCls of this component
    className String '' additional css class of root dom
    style React.CSSProperties additional style of root dom node
    locale Object import from 'rc-picker/lib/locale/en_US' rc-picker locale
    value moment current value like input's value
    defaultValue moment defaultValue like input's defaultValue
    defaultPickerValue moment Set default display picker view date
    mode time | datetime | date | week | month | year | decade control which kind of panel
    picker time | date | week | month | year control which kind of panel
    tabIndex Number 0 view tabIndex
    showTime Boolean | Object showTime options to provide an additional time selection
    showToday Boolean false whether to show today button
    disabledDate Function(date:moment) => Boolean whether to disable select of current date
    dateRender Function(currentDate:moment, today:moment) => React.Node custom rendering function for date cells
    monthCellRender Function(currentDate:moment, locale:Locale) => React.Node Custom month cell render method
    renderExtraFooter (mode) => React.Node extra footer
    onSelect Function(date: moment) a callback function, can be executed when the selected time
    onPanelChange Function(value: moment, mode) callback when picker panel mode is changed
    onMouseDown (evnet:React.MouseEventHandler) => void callback when executed onMouseDown evnent
    direction String: ltr or rtl Layout direction of picker component, it supports RTL direction too.

    RangePicker

    Property Type Default Description
    prefixCls String rc-picker prefixCls of this component
    className String '' additional css class of root dom
    style React.CSSProperties additional style of root dom node
    locale Object import from 'rc-picker/lib/locale/en_US' rc-picker locale
    value moment current value like input's value
    defaultValue moment defaultValue like input's defaultValue
    defaultPickerValue moment Set default display picker view date
    separator String '~' set separator between inputs
    picker time | date | week | month | year control which kind of panel
    placeholder [String, String] placeholder of date input
    showTime Boolean | Object showTime options to provide an additional time selection
    showTime.defaultValue [moment, moment] to set default time of selected date
    use12Hours Boolean false 12 hours display mode
    disabledTime Function(date: moment, type:'start'|'end'):Object
    ranges { String | [range: string]: moment[] } | { [range: string]: () => moment[] } preseted ranges for quick selection
    format String | String[] depends on whether you set timePicker and your locale use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display
    allowEmpty [Boolean, Boolean] allow range picker clearing text
    selectable [Boolean, Boolean] whether to selected picker
    disabled Boolean false whether the range picker is disabled
    onChange Function(value:[moment], formatString: [string, string]) a callback function, can be executed when the selected time is changing
    onCalendarChange Function(value:[moment], formatString: [string, string]) a callback function, can be executed when the start time or the end time of the range is changing
    direction String: ltr or rtl Layout direction of picker component, it supports RTL direction too.
    order Boolean true (TimeRangePicker only) false to disable auto order
    order Boolean true (TimeRangePicker only) false to disable auto order
    disabledPickerStartDate Function(startDate: moment):boolean disable start date
    disabledPickerEndDate Function(endDate: moment):boolean disable end date

    showTime-options

    Property Type Default Description
    format String moment format
    showHour Boolean true whether show hour
    showMinute Boolean true whether show minute
    showSecond Boolean true whether show second
    use12Hours Boolean false 12 hours display mode
    hourStep Number 1 interval between hours in picker
    minuteStep Number 1 interval between minutes in picker
    secondStep Number 1 interval between seconds in picker
    hideDisabledOptions Boolean false whether hide disabled options
    defaultValue moment null default initial value

    Development

    npm install
    npm start
    

    License

    rc-picker is released under the MIT license.

    Install

    npm i @dselmanovic/rc-picker

    DownloadsWeekly Downloads

    1,525

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    626 kB

    Total Files

    398

    Last publish

    Collaborators

    • dselmanovic