How can I reduce width and height of my dateTimePicker? - css

Question

I want to reduce the width and height of the box of my datetime picker. This is the image from my dateTimePicker.
And this is my component:
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
}) => {
const classes = classNames('form-group', {
'has-error': (touched && !valid),
'has-success': (touched && !valid)
})
return (
<div className={classes}>
<label htmlFor={input.name}>{label}</label> <br />
<DateTime
name = {input.name}
locale='es'
dateFormat= "DD-MM-YYYY"
timeFormat= "HH:mm:ss"
onChange={param => {
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 && touched) &&
<p className='help-block'>{error}</p>
}
</div>
);
};
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;
And this is my style sheet, the style sheet I'm importing from my DateTimePicker widget:
/*!
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 > 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;
}
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?

Answer 1

Override the CSS rules of react-datetime like the following:
.rdtPicker {
width: 400px; //Change it your preferred width
}
.rdtPicker tr {
height: 50px; //Choose the height of each row so that the overall height will change
}
Here's a working pen.