diff --git a/src/components/DatePicker/__test__/datePicker.spec.js b/src/components/DatePicker/__test__/datePicker.spec.js
index 89a11abbb..4cdbcd4fe 100644
--- a/src/components/DatePicker/__test__/datePicker.spec.js
+++ b/src/components/DatePicker/__test__/datePicker.spec.js
@@ -117,4 +117,8 @@ describe('', () => {
const component = mount();
expect(component.find('input').prop('value')).toBe('10/13/2019');
});
+ it('should render the passed icon', () => {
+ const component = mount(} />);
+ expect(component.find('span#test').exists()).toBe(true);
+ });
});
diff --git a/src/components/DatePicker/index.d.ts b/src/components/DatePicker/index.d.ts
index f1b6b4c91..eff31d607 100644
--- a/src/components/DatePicker/index.d.ts
+++ b/src/components/DatePicker/index.d.ts
@@ -28,6 +28,7 @@ export interface DatePickerProps extends BaseProps {
locale?: string;
selectionType?: 'single' | 'range';
variant?: 'single' | 'double';
+ icon?: ReactNode;
}
export default function(props: DatePickerProps): JSX.Element | null;
diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
index db2628e4a..27b7fa5a7 100644
--- a/src/components/DatePicker/index.js
+++ b/src/components/DatePicker/index.js
@@ -41,6 +41,7 @@ const DatePicker = React.forwardRef((props, ref) => {
locale,
variant,
selectionType,
+ icon: iconInProps,
} = useReduxForm(props);
const currentLocale = useLocale(locale);
@@ -102,13 +103,15 @@ const DatePicker = React.forwardRef((props, ref) => {
[openModal, readOnly],
);
+ const icon = iconInProps || ;
+
return (
}
+ icon={icon}
iconPosition="right"
required={required}
value={formattedDate}
@@ -206,6 +209,8 @@ DatePicker.propTypes = {
selectionType: PropTypes.oneOf(['single', 'range']),
/** The calendar variant. Defaults to 'single' */
variant: PropTypes.oneOf(['single', 'double']),
+ /** The icon to show if it is passed. It must be a svg icon or a font icon. Defaults to a Calendar icon */
+ icon: PropTypes.node,
};
DatePicker.defaultProps = {
@@ -235,6 +240,7 @@ DatePicker.defaultProps = {
locale: undefined,
selectionType: 'single',
variant: 'single',
+ icon: undefined,
};
export default DatePicker;
diff --git a/src/components/DatePicker/readme.md b/src/components/DatePicker/readme.md
index 86687fef0..e5c887362 100644
--- a/src/components/DatePicker/readme.md
+++ b/src/components/DatePicker/readme.md
@@ -1,4 +1,5 @@
-##### DatePicker base:
+# DatePicker base
+##### Use a `DatePicker` to allow users to select a date with a friendly user interface.
```js
import React from 'react';
@@ -39,7 +40,8 @@ const containerStyles = {
```
-##### DatePicker with date constraints:
+# DatePicker with date constraints
+##### Use `minDate` and `maxDate` to limit the available dates.
```js
import React from 'react';
@@ -65,7 +67,8 @@ const initialState = { date: new Date() };
```
-##### DatePicker with different date formats:
+# DatePicker with different date formats
+##### Use the `formatStyle` prop to customize the date format.
```js
import React from 'react';
@@ -101,7 +104,8 @@ const initialState = { date: new Date() };
```
-##### DatePicker required:
+# DatePicker required
+##### You can pass the `required` prop to mark the input as required.
```js
import React from 'react';
@@ -126,7 +130,8 @@ const initialState = { date: new Date() };
```
-##### DatePicker with error:
+# DatePicker with error
+##### Pass the `error` prop to indicate that there is an error in the input.
```js
import React from 'react';
@@ -153,7 +158,8 @@ const initialState = { date: undefined };
```
-##### DatePicker disabled:
+# DatePicker disabled
+##### Use the `disabled` prop to render the input as disabled.
```js
import React from 'react';
@@ -171,7 +177,8 @@ const containerStyles = {
;
```
-##### DatePicker readOnly:
+# DatePicker readOnly
+##### Pass the `readOnly` prop to prevent the user from modifying the value.
```js
import React from 'react';
@@ -189,7 +196,8 @@ const containerStyles = {
```
-##### DatePicker with range selection:
+# DatePicker with range selection
+##### You can allow the users to select a date range passing the `selectionType` prop as 'range'.
```js
import React from 'react';
@@ -219,7 +227,8 @@ const containerStyles = {
```
-##### DatePicker with variant double:
+# DatePicker with variant double
+##### Use the 'double' variant to show two months side by side.
```js
import React from 'react';
@@ -247,7 +256,39 @@ const containerStyles = {
```
-##### DatePicker select date:
+# DatePicker with custom icon
+##### It is possible to provide a custom icon for the input if you pass the `icon` prop.
+
+```js
+import React from 'react';
+import { DatePicker } from 'react-rainbow-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendar } from '@fortawesome/free-solid-svg-icons';
+
+const initialState = {
+ date: undefined,
+};
+const containerStyles = {
+ maxWidth: 400,
+};
+
+
+ setState({ date })}
+ icon={}
+ />
+
+```
+
+# DatePicker select date
+##### This is an example use case for the DatePicker component
```js
import React from 'react';
diff --git a/src/components/DateTimePicker/__test__/dateTimePicker.spec.js b/src/components/DateTimePicker/__test__/dateTimePicker.spec.js
index f8b12982f..67632d236 100644
--- a/src/components/DateTimePicker/__test__/dateTimePicker.spec.js
+++ b/src/components/DateTimePicker/__test__/dateTimePicker.spec.js
@@ -105,4 +105,8 @@ describe('', () => {
);
expect(component.find('input').prop('value')).toBe('10/24/2019, 10:48 AM');
});
+ it('should render the passed icon', () => {
+ const component = mount(} />);
+ expect(component.find('span#test').exists()).toBe(true);
+ });
});
diff --git a/src/components/DateTimePicker/index.js b/src/components/DateTimePicker/index.js
index 61815f3d7..d638b7d9d 100644
--- a/src/components/DateTimePicker/index.js
+++ b/src/components/DateTimePicker/index.js
@@ -44,6 +44,7 @@ const DateTimePicker = React.forwardRef((props, ref) => {
bottomHelpText,
hour24,
locale: localeProp,
+ icon: iconInProps,
} = props;
const inputRef = useRef();
@@ -103,13 +104,15 @@ const DateTimePicker = React.forwardRef((props, ref) => {
onChange(...args);
};
+ const icon = iconInProps || ;
+
return (
}
+ icon={icon}
iconPosition="right"
required={required}
value={formattedDatetime}
@@ -209,6 +212,8 @@ DateTimePicker.propTypes = {
locale: PropTypes.string,
/** Specifies that the DateTimePicker will be in a 24hr format. This value defaults to false. */
hour24: PropTypes.bool,
+ /** The icon to show if it is passed. It must be a svg icon or a font icon. Defaults to a DateTime icon */
+ icon: PropTypes.node,
};
DateTimePicker.defaultProps = {
@@ -239,6 +244,7 @@ DateTimePicker.defaultProps = {
isCentered: false,
locale: undefined,
hour24: false,
+ icon: undefined,
};
export default withReduxForm(DateTimePicker);
diff --git a/src/components/DateTimePicker/readme.md b/src/components/DateTimePicker/readme.md
index 3087fa0d2..39b32e62f 100644
--- a/src/components/DateTimePicker/readme.md
+++ b/src/components/DateTimePicker/readme.md
@@ -1,4 +1,5 @@
-##### DateTimePicker base:
+# DateTimePicker base
+##### Use a `DateTimePicker` to allow users to select a date and time with a friendly user interface.
```js
import React from 'react';
@@ -53,7 +54,8 @@ const cancelButtonLocalizedLabel = {
;
```
-##### DateTimePicker with date constraints:
+# DateTimePicker with date constraints
+##### Use `minDate` and `maxDate` to limit the available dates.
```js
import React from 'react';
@@ -79,7 +81,8 @@ const initialState = { value: new Date() };
```
-##### DateTimePicker with different date formats:
+# DateTimePicker with different date formats
+##### Use the `formatStyle` prop to customize the date format.
```js
import React from 'react';
@@ -119,7 +122,8 @@ const initialState = { value: new Date() };
```
-##### DateTimePicker with time in 24h format:
+# DateTimePicker with time in 24h format
+##### Pass the `use24` prop to show the time in 24H format.
```js
import React from 'react';
@@ -145,7 +149,8 @@ const initialState = { value: new Date('2019-10-25 18:44') };
```
-##### DateTimePicker required:
+# DateTimePicker required
+##### You can pass the `required` prop to mark the input as required.
```js
import React from 'react';
@@ -169,7 +174,8 @@ const initialState = { value: new Date() };
```
-##### DateTimePicker with error:
+# DateTimePicker with error
+##### Pass the `error` prop to indicate that there is an error in the input.
```js
import React from 'react';
@@ -196,7 +202,8 @@ const initialState = { value: undefined };
```
-##### DateTimePicker disabled:
+# DateTimePicker disabled
+##### Use the `disabled` prop to render the input as disabled.
```js
import React from 'react';
@@ -214,7 +221,8 @@ const containerStyles = {
```
-##### DateTimePicker readOnly:
+# DateTimePicker readOnly
+##### Pass the `readOnly` prop to prevent the user from modifying the value.
```js
import React from 'react';
@@ -231,3 +239,28 @@ const containerStyles = {
```
+
+# DateTimePicker with custom icon
+##### It is possible to provide a custom icon for the input if you pass the `icon` prop.
+
+```js
+import React from 'react';
+import { DateTimePicker } from 'react-rainbow-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendar } from '@fortawesome/free-solid-svg-icons';
+
+const containerStyles = {
+ maxWidth: 400,
+};
+
+