title: How can I reduce width and height of my dateTimePicker?
body: <p>I want to reduce the width and height of the box of my datetime picker. This is the image from my dateTimePicker.<a href="https://i.stack.imgur.com/MeJlq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MeJlq.png" alt="dataTimePicker image"></a></p>
  
  <p>And this is my component:</p>
  
  <pre><code>import React,{useState} from 'react';
  import momentLocaliser from 'react-widgets-moment';
  import DateTime from 'react-datetime';
  import PropTypes from 'prop-types';
  import classNames from 'classnames';
  import 'react-datetime/css/react-datetime.css';
  
  const moment = require('moment');
  
       moment.locale('es');
       momentLocaliser(moment);
  
       const DateTimePickerInput = ({
           label,
           format,
           input,
           width,
           placeholder,
           selected,
           tooltip,
           tooltipPlacement,
           disabled,
           defaultValue,
           value,
           onChange,
           inputProps,
           meta: { valid, touched, error},
           showTime,
           style,
           ...props
       }) =&gt; {
           const classes = classNames('form-group', {
           'has-error': (touched &amp;&amp; !valid),
           'has-success': (touched &amp;&amp; !valid)
       })
       return (
           &lt;div className={classes}&gt;
               &lt;label htmlFor={input.name}&gt;{label}&lt;/label&gt; &lt;br /&gt;
               &lt;DateTime
                   name = {input.name}
                   locale='es'
                   dateFormat= "DD-MM-YYYY"
                   timeFormat= "HH:mm:ss"
                   onChange={param =&gt; {
                       input.onChange(param)
                   }}
                  inputProps={{placeholder: !input.value ? 'Please, select a date':                    moment(input.value).format('DD-MM-YYYY HH:mm:ss')/*,disabled: true}*/}}
                  style={{}}
  
                   {(!valid &amp;&amp; touched) &amp;&amp;
                       &lt;p className='help-block'&gt;{error}&lt;/p&gt;
                   }
            &lt;/div&gt;
         );
            };
  
         DateTimePickerInput.propTypes = {
             disabled: PropTypes.bool,
             input: PropTypes.object.isRequired,
             label: PropTypes.string.isRequired,
             meta: PropTypes.object.isRequired,
             placeholder: PropTypes.string,
             tooltip: PropTypes.string,
             tooltipPlacement: PropTypes.string
                                                              }
  
  export default DateTimePickerInput;
  </code></pre>
  
  <p>And this is my style sheet, the style sheet I'm importing from my DateTimePicker widget:</p>
  
  <pre><code>/*!
       https://github.com/YouCanBookMe/react-datetime
   */
  
  .rdt {
      position: relative;
  }
  
  .rdtPicker {
      display: none;
      position: absolute;
      width: 250px;
      padding: 4px;
      margin-top: 1px;
      z-index: 99999 !important;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
      border: 1px solid #f9f9f9;
  }
  
  .rdtOpen .rdtPicker {
      display: block;
  }
  
  .rdtStatic .rdtPicker {
      box-shadow: none;
      position: static;
  }
  
  .rdtPicker .rdtTimeToggle {
      text-align: center;
  }
  
  .rdtPicker table {
      width: 100%;
      margin: 0;
  }
  
  .rdtPicker td,
  .rdtPicker th {
      text-align: center;
      height: 28px;
  }
  
  .rdtPicker td {
      cursor: pointer;
  }
  
  .rdtPicker td.rdtDay:hover,
  .rdtPicker td.rdtHour:hover,
  .rdtPicker td.rdtMinute:hover,
  .rdtPicker td.rdtSecond:hover,
  .rdtPicker .rdtTimeToggle:hover {
      background: #eeeeee;
      cursor: pointer;
  }
  
  .rdtPicker td.rdtOld,
  .rdtPicker td.rdtNew {
      color: #999999;
  }
  
  .rdtPicker td.rdtToday {
      position: relative;
  }
  
  .rdtPicker td.rdtToday:before {
      content: '';
      display: inline-block;
      border-left: 7px solid transparent;
      border-bottom: 7px solid #428bca;
      border-top-color: rgba(0, 0, 0, 0.2);
      position: absolute;
      bottom: 4px;
      right: 4px;
  }
  
  .rdtPicker td.rdtActive,
  .rdtPicker td.rdtActive:hover {
      background-color: #428bca;
      color: #fff;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  }
  
  .rdtPicker td.rdtActive.rdtToday:before {
      border-bottom-color: #fff;
  }
  
  .rdtPicker td.rdtDisabled,
  .rdtPicker td.rdtDisabled:hover {
      background: none;
      color: #999999;
      cursor: not-allowed;
  }
  
  .rdtPicker td span.rdtOld {
      color: #999999;
  }
  
  .rdtPicker td span.rdtDisabled,
  .rdtPicker td span.rdtDisabled:hover {
      background: none;
      color: #999999;
      cursor: not-allowed;
  }
  
  .rdtPicker th {
      border-bottom: 1px solid #f9f9f9;
  }
  
  .rdtPicker .dow {
      width: 14.2857%;
      border-bottom: none;
      cursor: default;
  }
  
  .rdtPicker th.rdtSwitch {
      width: 100px;
  }
  
  .rdtPicker th.rdtNext,
  .rdtPicker th.rdtPrev {
      font-size: 21px;
      vertical-align: top;
  }
  
  .rdtPrev span,
  .rdtNext span {
      display: block;
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Chrome/Safari/Opera */
      -khtml-user-select: none; /* Konqueror */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none;
  }
  
  .rdtPicker th.rdtDisabled,
  .rdtPicker th.rdtDisabled:hover {
      background: none;
      color: #999999;
      cursor: not-allowed;
  }
  
  .rdtPicker thead tr:first-child th {
      cursor: pointer;
  }
  
  .rdtPicker thead tr:first-child th:hover {
      background: #eeeeee;
  }
  
  .rdtPicker tfoot {
      border-top: 1px solid #f9f9f9;
  }
  
  .rdtPicker button {
      border: none;
      background: none;
      cursor: pointer;
  }
  
  .rdtPicker button:hover {
      background-color: #eee;
  }
  
  .rdtPicker thead button {
      width: 100%;
      height: 100%;
  }
  
  td.rdtMonth,
  td.rdtYear {
      height: 50px;
      width: 25%;
      cursor: pointer;
  }
  
  td.rdtMonth:hover,
  td.rdtYear:hover {
      background: #eee;
  }
  
  .rdtCounters {
      display: inline-block;
  }
  
  .rdtCounters &gt; div {
      float: left;
  }
  
  .rdtCounter {
      height: 100px;
  }
  
  .rdtCounter {
      width: 40px;
  }
  
  .rdtCounterSeparator {
      line-height: 100px;
  }
  
  .rdtCounter .rdtBtn {
      height: 40%;
      line-height: 40px;
      cursor: pointer;
      display: block;
  
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Chrome/Safari/Opera */
      -khtml-user-select: none; /* Konqueror */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none;
  }
  
  .rdtCounter .rdtBtn:hover {
      background: #eee;
  }
  
  .rdtCounter .rdtCount {
      height: 20%;
      font-size: 1.2em;
  }
  
  .rdtMilli {
      vertical-align: middle;
      padding-left: 8px;
      width: 48px;
  }
  
  .rdtMilli input {
      width: 100%;
      font-size: 1.2em;
      margin-top: 37px;
  }
  
  .rdtTime td {
      cursor: default;
  }
  
  </code></pre>
  
  <p>I'm using react-datetime as dependency. The box of the widget has too big width and I need to reduce the width of the box. How can I reduce the width of the box of my date time picker?</p>