I can't set custom style to antd Date Picker in reactjs

user_5124488 0
Viewed 12746

I want to set the custom style to antd DatePicker but it just doesn't work. Some styling work and some are not.

JSX

 <div >
        <DatePicker
          defaultValue={moment(date ? date : new Date(), dateFormat)}
          defaultPickerValue={moment(date ? date : new Date(), dateFormat)}
          format={dateFormat}
          onChange={this.handleDateChange}
          allowClear={false}
          style={{
            height: "53px",
            width: "155px",
            border: "1px solid blue",
            borderRadius: "0px",
            cursor: "pointer",
            fontSize: "17px",
            margin: "0px",
            padding: "0px"
          }}
        />
      </div>

Expected behaviour:

I want this

Actual behaviour:

I don't want this

It currently shrinks the height. I don't want this.

I want the date picker to take full width and height. Also, How can I remove default border style in antd date picker? is It possible to remove that calendar icon?

I will appreciate your reply. thank you.

antd reactjs css javascript
2 Answers

For height and width make there CSS value to auto and for hiding the calendar icon you just put suffixIcon property with DatePicker tag.

Please see below code or LIVE DEMO-

<DatePicker
          defaultValue={moment(new Date(), 'DD MMM, YYYY')}
          defaultPickerValue={moment(new Date(), 'DD MMM, YYYY')}
          format={'DD MMM, YYYY'}
          onChange={this.handleDateChange}
          allowClear={false}
          suffixIcon
          style={{
            height: "auto",
            width: "auto",
            border: "none",
            borderRadius: "0px",
            cursor: "pointer",
            fontSize: "17px",
            margin: "0px",
            padding: "0px"
          }}
        />
user_57626870

The css is being applied to the span while it should also be reflected on the input inside, you could write custom css to set style of that input using its selector:

custom.css 
.ant-calendar-picker-input.ant-input {
  border-radius: 0px;
  height: 53px;
}

enter image description here

user_40514710
Related