I'm looking to decrease the dimensions of my datetime picker box. Here's an image of my current dateTimePicker: https://i.stack.imgur.com/MeJlq.png
Below is the component I'm using:
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')}}
style={{}}
{( !valid && touched) &&
<p className='help-block'>{error}</p>
}
</div>
);
};
Here is the stylesheet that I am 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;
}
...
The width of the date time picker box is larger than expected. How can I adjust the width of the box to make it smaller?