React-dates: Option for input icon for end date

[JemarJones]

The input icon added in #222 is awesome and definitely useful. However its only available in relation to the start date. I have requirements to have the exact same thing done right next to the EndDate as well, like so:

I figure that others may also have similar requirements, would this project be willing to add such a feature? If that is the case, i am willing to put up a PR for it!

[majapw]

Yeah I think we could move this logic in the DateInput component perhaps. :) Happy to accept a PR.

[nezed]

@majapw The feature in #338 may be universal solution for same cases 😉
@JemarJones currently you can make some workaround with customArrowIcon prop

[JemarJones]

@nezed Hah good workaround, the option wasn't quite around just yet when i made this 😜.

[JemarJones]

In regards to #338 resolving this, i think it may not be the best solution to have to fully visually reimplement (and keep up to date with any future changes to) DateInput just to add the input icon.

[nezed]

@JemarJones i have made this as common solution for cases with appending and prepending elements, and complex formatting cases.
Its deal between producing a few more props and partial content overriding by user.
Whereas in terms of the fact that the main components has already a lot of props, and may require more in future, i think the proposed renderer is optimal compromise.

[JemarJones]

@nezed Those are good points. What if alternatively, a prop was very similar to #338 was added called something like wrapInput that received the node (i haven't checked which node that is) that currently renders the input as an argument, and could simply use that as a child if it chooses? I think that could be a nice solution because it makes things like this issue a case of adding only a small thing instead of recreating the whole input display.

[nezed]

@JemarJones Sounds good, but have not ability to work with date format (e.g. append label with weekday).
Can you copy and post your proposition described above into #338? (It will be great to discuss and improve solution of exiting PR!)

[Clcll]

I resolve it this way

                        <DateRangePicker
                            startDate={this.state.startDate} // momentPropTypes.momentObj or null,
                            endDate={this.state.endDate} // momentPropTypes.momentObj or null,
                            onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} 
                            focusedInput={this.state.focusedInput} 
                            onFocusChange={focusedInput => this.setState({ focusedInput })}
                            customArrowIcon={null} # // important one
                            startDatePlaceholderText={'from'}
                            endDatePlaceholderText={'to'}
                            screenReaderInputMessage={" "} # // important one
                        />

And custom css file

.DateRangePicker {
    display: block;
}

.DateRangePickerInput {
    display: block;
    border: 0;
}
.DateRangePickerInput:hover{
}

.DateRangePickerInput_arrow.DateRangePickerInput_arrow_1 {
    display: none;
}

.DateInput {
    position: relative;
    border-radius: 4px;
    border: 1px solid #D2D6E4;
    width: calc(50% - 8px);
    height: 56px;
    cursor: pointer;
}
.DateInput_screenReaderMessage {
    overflow: visible;
    clip: auto;
    width: 100%;
    pointer-events: none;
}
.DateInput_screenReaderMessage:after {
    content: '';
    width: 21px;
    height: 22px;
    position: absolute;
    right: 16px;
    bottom: 15px;
    background: url('./calendar.svg') no-repeat;
    background-size: contain;
}
.DateInput:first-child {
    margin-right: 16px;
}

.DateInput:hover {
    border: 1px solid #848CA8;
}

.DateInput_input {
    color: #4A506E;
    font-size: 15px;
    border-radius: 4px;
    border-bottom: 0;
    height: 100%;
}
.DateInput_input:before {
    content: '';
    width: 100px;
    height: 100px;
    background: red;
}

.DateInput_input__focused {
   border-bottom: 0;
}