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

Question

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:

Actual behaviour:

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.

Answer 1

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"
          }}
        />

Answer 2

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;
}