React-dates: close button in daterangepicker in react dates

[Notlistedanywhere]

I wanted to add small close button in daterangepicker in upper right corner but don't know how to add custom close button. please help!!

[majapw]

I think there's a customCloseIcon button. Have you looked at https://github.com/airbnb/react-dates/blob/master/stories/DateRangePicker_input.js#L108-L115?

[Notlistedanywhere]

import React, { Component } from 'react';
import moment from 'moment';

import logo from './logo.svg';
import './App.css';
import 'react-dates/initialize';
import { DateRangePicker, SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

// var SelectedStartDate = moment('2017-01-10');
// var SelectedEndDate = moment('2017-12-10');

const TestCustomCloseIcon = () => (
  <span
    style={{
      border: '1px solid #dce0e0',
      backgroundColor: '#fff',
      color: '#484848',
      padding: '3px',
    }}
  >'X'</span>
);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: null,
      endDate: null,
      focusedInput: null
    };
    this.onDatesChange = this.onDatesChange.bind(this);
    this.onFocusChange = this.onFocusChange.bind(this);
  }

  onDatesChange({ startDate,endDate }) {
    this.setState({ startDate, endDate });
  }

  onFocusChange(focusedInput) {
    this.setState({ focusedInput });
  }
  render() {
    const { focusedInput, startDate, endDate } = this.state;
    return (
      <div className="App">
        <p className="App-intro">
          <h1>Calendar</h1>
          <DateRangePicker
            onDatesChange = {this.onDatesChange}
            onFocusChange = {this.onFocusChange}
            focusedInput = {focusedInput}
            date = {startDate}
            startDate = {startDate} 
            endDate = {endDate}  
            startDatePlaceholderText="Check In"
            endDatePlaceholderText="Check Out"
            customCloseIcon = {<TestCustomCloseIcon />}
          />
        </p>
      </div>
    );
  }
}

export default App;

Still close button is not appearing in Calendar :(
I am not sure whether it is correct way to approach.

[interactivejohn]

The customCloseIcon feature is misleading. It is actually a custom CLEAR icon that clears the date in the input field, not a close icon to close the calendar itself. Also, in order to get this icon to show up, you have to have showClearDate: true set in your props.

[jnrepo]

@Notlistedanywhere if you can use the prop withFullscreenPortal there will be a close button. Although it would be nice to have this feature when using the withPortal prop as well.

[colemerrick]

@Notlistedanywhere You can use calendarInfoPosition="top", and renderCalendarInfo={() => this.renderCalendarInfo()} to render any close icon you like. Use your TestCustomCloseIcon within renderCalendarInfo, and trigger this.setState({focusedInput: null}) on click to close the actual calendar.

[majapw]

@colemerrick's suggestion is probably the best one we have on offer right now. And we really should rename the icon (the issue is that we do use it for both the close button on the withFullScreenPortal and for the clear button otherwise---I think that could use some restructuring in the next major release).