date-picker

v1.10.0

v1.9.0

v1.7.0

v1.6.1

v1.4.0

STATUS

Passing

DOWNLOADS

10,340

VISIBILITY

Public

PUBLISHED

2 years ago

SIZE

37 KB

A DatePicker is a text input to capture a date.

1 contributor

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

Vue

Angular

React Native

Add dependency...

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';

modifieddraft

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

Name	Type	Default value	Description
className	`string`	`undefined`
style	`object`	`undefined`
value	`Date \| string`	`undefined`	Sets the date for the DatePicker programmatically.
maxDate	`Date`	`undefined`	The ending of a range of valid dates. The range includes the endDate. The default value is current date + 100 years.
minDate	`Date`	`undefined`	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	`string`	`undefined`	Text that is displayed when the DatePicker is empty, to prompt the user for a valid entry.
label	`string \| node`	`undefined`	Text label for the DatePicker.
hideLabel	`bool`	`false`	A boolean to hide the DatePicker label.
required	`bool`	`false`	Specifies that the DatePicker field must be filled out before submitting the form. This value defaults to false.
name	`string`	`undefined`	The name of the DatePicker.
bottomHelpText	`string \| node`	`null`	Shows the help message below the DatePicker.
isCentered	`bool`	`false`	Specifies that the DatePicker text will be centered. This value defaults to false.
error	`string \| node`	`null`	Specifies that the DatePicker must be filled out before submitting the form.
readOnly	`bool`	`false`	Specifies that the DatePicker is read-only. This value defaults to false.
disabled	`bool`	`false`	Specifies that the DatePicker element should be disabled. This value defaults to false.
tabIndex	`number \| string`	`undefined`	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	`string`	`undefined`	The id of the outer element.
className	`string`	`undefined`	A CSS class for the outer element, in addition to the component’s base classes.
style	`object`	`undefined`	An object with custom style applied to the outer element.
locale	`string`	`undefined`	The DatePicker locale. Defaults to browser’s language.