0
377
ViewsHow can I remove border from my DatePicker input box?
I am working on a react component and using datePicker inside it to choose date,When I render my DatePicker component,It shows a Black border outside my text box and I want to remove that border.
Here's my component:
<div className='col'>
{translateText('ui.label.message.start.date')}
<DatePicker
selected={this.props.startDate}
placeholder={translateText('Start Date')}
onChange={date => this.handleStartDateChange(date)}
dateFormat='DD-MM-YYYY'
customStyles={{ dateInput: { borderWidth: 0 } }}
/>
</div>
I have introuduced customStyles to remove that border but its not working.
Here's a snapshot of my issue:
·
Juan Pablo Isaza
2 answers
Answer question0
Looks like there is no css applied to your input-filed. You could fix this like:
.react-datepicker-wrapper input[type="text"]{
border: none;
}
·
Juan Pablo Isaza
Report
0
try to wrap the component , or try this options I provide here, please next time write the exact library you use.
<div className='col'>
{translateText('ui.label.message.start.date')}
<div className="customDatePicker">
<DatePicker
wrapperClassName="customDatePicker"
className="customDatePicker"
selected={this.props.startDate}
placeholder={translateText('Start Date')}
onChange={date => this.handleStartDateChange(date)}
dateFormat='DD-MM-YYYY'
/>
</div>
</div>
·
Juan Pablo Isaza
Report
Answer question