date-picker
v1.10.0arrow_drop_down
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>
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. |