Fixes #1173

components/date_picker/DatePicker.js

@@ -45,6 +45,7 @@ const factory = (Input, DatePickerDialog) => {
       readonly: PropTypes.bool,
       sundayFirstDayOfWeek: React.PropTypes.bool,
       theme: PropTypes.shape({
+        container: PropTypes.string,
         input: PropTypes.string
       }),
       value: PropTypes.oneOfType([
@@ -115,7 +116,7 @@ const factory = (Input, DatePickerDialog) => {
       const formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
 
       return (
-        <div data-react-toolbox='date-picker'>
+        <div data-react-toolbox='date-picker' className={this.props.theme.container}>
           <Input
             {...others}
             className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}

components/date_picker/readme.md

@@ -77,6 +77,7 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 | `button` | Used for the buttons in the dialog.|
 | `calendar` | Used for the calendar root element.|
 | `calendarWrapper` | Used as wrapper for the calendar component inside dialog.|
+| `container` | Wrapper element of the picker.|
 | `date` | Used for the date element inside header.|
 | `day` | Used for the day element inside the calendar.|
 | `days` | Used for the list of days inside a month.|

components/time_picker/TimePicker.js

@@ -28,6 +28,7 @@ const factory = (TimePickerDialog, Input) => {
       onOverlayClick: PropTypes.func,
       readonly: PropTypes.bool,
       theme: PropTypes.shape({
+        container: PropTypes.string,
         input: PropTypes.string
       }),
       value: PropTypes.object
@@ -93,7 +94,7 @@ const factory = (TimePickerDialog, Input) => {
       } = this.props;
       const formattedTime = value ? time.formatTime(value, format) : '';
       return (
-        <div data-react-toolbox='time-picker'>
+        <div data-react-toolbox='time-picker' className={this.props.theme.container}>
           <Input
             {...others}
             className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}

components/time_picker/readme.md

@@ -56,6 +56,7 @@ If you want to provide a theme via context, the component key is `RTTimePicker`.
 | `button` | Used for buttons inside the dialog of the picker.|
 | `clock` | Clock root class element.|
 | `clockWrapper` | Wrapper for the proper positioning of the clock.|
+| `container` | Wrapper element of the picker.|
 | `dialog` | Used for the dialog component.|
 | `face` | Used to style the clock face.|
 | `hand` | Used for the clock's hand.|