Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

date-picker

v1.10.0arrow_drop_down
STATUS
Passing
DOWNLOADS
46
VISIBILITY
Public
PUBLISHED
7 months ago
SIZE
37 KB
A DatePicker is a text input to capture a date.
Install date-picker as a package?
Copied
npm i @bit/nexxtway.react-rainbow.date-picker
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
chevron_left
chevron_right
DatePicker base:
import React from 'react';
import { Picklist, PicklistOption, DatePicker } from 'react-rainbow-components';

const initialState = {
    date: new Date('2019-10-25 10:44'),
    locale: { name: 'en-US', label: 'English (US)' },
};

const containerStyles = {
    maxWidth: 400,
};

<div>
    <GlobalHeader src="images/user/user2.jpg">
        <div className="rainbow-flex rainbow-align_right">
            <Picklist value={state.locale} onChange={value => setState({ locale: value })}>
                <PicklistOption name="en-US" label="English (US)" />
                <PicklistOption name="es-ES" label="Spanish (Spain)" />
                <PicklistOption name="fr-Fr" label="French" />
            </Picklist>
        </div>
    </GlobalHeader>
    <div
        className="rainbow-align-content_center rainbow-m-vertical_large rainbow-p-horizontal_small rainbow-m_auto"
        style={containerStyles}
    >
        <DatePicker
            value={state.date}
            onChange={value => setState({ date: value })}
            label="DatePicker Label"
            formatStyle="large"
            locale={state.locale.name}
        />
    </div>
</div>;
DatePicker with date constraints:
import React from 'react';
import { DatePicker } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 400,
};

initialState = { date: new Date() };
<div
    className="rainbow-align-content_center rainbow-m-vertical_large rainbow-p-horizontal_small rainbow-m_auto"
    style={containerStyles}
>
    <DatePicker
        value={state.date}
        minDate={new Date(2018, 0, 4)}
        maxDate={new Date(2020, 0, 4)}
        label="DatePicker Label"
        onChange={value => setState({ date: value })}
    />
</div>
DatePicker with different date formats:
import React from 'react';
import { DatePicker } from 'react-rainbow-components';

initialState = { date: new Date() };
<div className="rainbow-align-content_center rainbow-m-vertical_large rainbow-flex_wrap">
    <div className="rainbow-m-around_small">
        <DatePicker
            formatStyle="small"
            value={state.date}
            label="DatePicker Label"
            onChange={value => setState({ date: value })}
        />
    </div>
    <div className="rainbow-m-around_small">
        <DatePicker
            formatStyle="medium"
            value={state.date}
            label="DatePicker Label"
            onChange={value => setState({ date: value })}
        />
    </div>
    <div className="rainbow-m-around_small">
        <DatePicker
            formatStyle="large"
            value={state.date}
            label="DatePicker Label"
            onChange={value => setState({ date: value })}
        />
    </div>
</div>
DatePicker required:
import React from 'react';
import { DatePicker } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 400,
};

initialState = { date: new Date() };
<div
    className="rainbow-align-content_center rainbow-m-vertical_large rainbow-p-horizontal_small rainbow-m_auto"
    style={containerStyles}
>
    <DatePicker
        required
        value={state.date}
        label="DatePicker Label"
        onChange={value => setState({ date: value })}
    />
</div>
DatePicker with error:
import React from 'react';
import { DatePicker } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 400,
};

initialState = { date: undefined };
<div
    className="rainbow-align-content_center rainbow-m-vertical_large rainbow-p-horizontal_small rainbow-m_auto"
    style={containerStyles}
>
    <DatePicker
        required
        error="Select a date is Required"
        placeholder="Select a date"
        value={state.date}
        label="DatePicker Label"
        onChange={value => setState({ date: value })}
    />
</div>
DatePicker disabled:
import React from 'react';
import { DatePicker } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 400,
};

<div
    className="rainbow-align-content_center rainbow-m-vertical_large rainbow-p-horizontal_small rainbow-m_auto"
    style={containerStyles}
>
    <DatePicker disabled value={new Date()} label="DatePicker Label" />
</div>
DatePicker readOnly:
import React from 'react';
import { DatePicker } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 400,
};

<div
    className="rainbow-align-content_center rainbow-m-vertical_large rainbow-p-horizontal_small rainbow-m_auto"
    style={containerStyles}
>
    <DatePicker readOnly value={new Date()} label="DatePicker Label" />
</div>
Properties
NameTypeDefault valueDescription
className
stringundefined
style
objectundefined
value
Date | stringundefined

Sets the date for the DatePicker programmatically.

maxDate
Dateundefined

The ending of a range of valid dates. The range includes the endDate. The default value is current date + 100 years.

minDate
Dateundefined

The beginning of a range of valid dates. The range includes the startDate. The default value is current date - 100 years.

formatStyle
'small' | 'medium' | 'large''medium'

The date format style to display in the input field. Valid values are small, medium, and large.

onChange
function() => {}

The action triggered when a value attribute changes.

placeholder
stringundefined

Text that is displayed when the DatePicker is empty, to prompt the user for a valid entry.

label
string | nodeundefined

Text label for the DatePicker.

hideLabel
boolfalse

A boolean to hide the DatePicker label.

required
boolfalse

Specifies that the DatePicker field must be filled out before submitting the form. This value defaults to false.

name
stringundefined

The name of the DatePicker.

bottomHelpText
string | nodenull

Shows the help message below the DatePicker.

isCentered
boolfalse

Specifies that the DatePicker text will be centered. This value defaults to false.

error
string | nodenull

Specifies that the DatePicker must be filled out before submitting the form.

readOnly
boolfalse

Specifies that the DatePicker is read-only. This value defaults to false.

disabled
boolfalse

Specifies that the DatePicker element should be disabled. This value defaults to false.

tabIndex
number | stringundefined

Specifies the tab order of an element (when the tab button is used for navigating).

onClick
function() => {}

The action triggered when the element is clicked.

onFocus
function() => {}

The action triggered when the element receives focus.

onBlur
function() => {}

The action triggered when the element releases focus.

id
stringundefined

The id of the outer element.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied to the outer element.

locale
stringundefined

The DatePicker locale. Defaults to browser’s language.