react-datetime-picker
react-datetime-picker copied to clipboard
<Fit />'s child needed to have its height decreased to 251px.
trafficstars
this is my codes
<ReactDateTimePicker
{...field}
amPmAriaLabel="Select AM/PM"
calendarAriaLabel="Toggle calendar"
clearAriaLabel="Clear value"
dayAriaLabel="Day"
hourAriaLabel="Hour"
maxDetail="second"
minuteAriaLabel="Minute"
monthAriaLabel="Month"
nativeInputAriaLabel="Date and time"
secondAriaLabel="Second"
yearAriaLabel="Year"
format="MM/dd/yyyy hh:mm a"
isClockOpen={false}
disableClock={true}
id="custom_datetime-picker"
calendarIcon={<Icon size={18} />}
/>
<style jsx global>{`
#custom_datetime-picker .react-datetime-picker__wrapper {
border: 1px solid #e4e4e7;
padding: 5px;
border-radius: 5px;
}
#custom_datetime-picker
input.react-datetime-picker__inputGroup__input.react-datetime-picker__inputGroup__year
+ .react-datetime-picker__inputGroup__divider {
width: 2px;
background: #e4e4e7;
border-radius: 5px;
margin: 0 5px 0 5px;
}
#custom_datetime-picker .react-calendar {
background: #ffffff;
border: 1px solid #e4e4e7;
border-radius: 5px;
padding: 5px;
}
#custom_datetime-picker
.react-calendar
.react-calendar__tile--active,
#custom_datetime-picker
.react-calendar
.react-calendar__tile--now {
background-color: #18181b;
color: #fff;
}
#custom_datetime-picker .react-calendar .react-calendar__tile {
border-radius: 5px;
}
#custom_datetime-picker
.react-calendar
.react-calendar__tile--hasActive {
background: #18181be3;
color: #fff;
}
`}</style>