React-date-picker: Placeholder text

[jimbobhickville]

It would be nice if we could have some placeholder text in the inputs if we don't pass in a default date. Something like:

MM / DD / YYYY

That way we could require the user to pick a date, but show them something in the input by default.

[wojtekmaj]

Hey @jimbobhickville!
I think it's a great idea. It's my priority to keep everything localized though and I need to figure out how this could be working with little to no configuration.

[wojtekmaj]

Hey @jimbobhickville,
as a workaround, I have implemented placeholders like --/--/---- for now.
While not a perfect solution, at least the fields stay wide enough and still look kinda like a date when empty.
Let me know what you think!

[dmrqx]

Hello @wojtekmaj,
first of all, thanks for all your work. It's my first time using react-date-picker and I'm fairly new to React, but I think things are going great.

About this issue, would it be an ok solution to try and add something like riek edit in place functionality? Then the component could still rely on number inputs when editing, but display the value as string when out of focus. It seems to me it would be easier to style and set placeholders this way.

[waheedsid]

Has this been already implemented?

[wojtekmaj]

Not in a way dmrqx suggested. Seems like a neat idea, but so far, only -- are being displayed.

[amit-carrotsense]

a simple workaround:

componentDidMount(){
    document.querySelector('.react-date-picker__button__input__day').placeholder = 'Day';
    document.querySelector('.react-date-picker__button__input__month').placeholder = 'Month';
    document.querySelector('.react-date-picker__button__input__year').placeholder = 'Year'
 }

[sridhar37]

Thanks, @amit-carrotsense for the workaround,
In my component, I have used two react-date-picker components one for FROM date and one for TO date
like this,

componentDidMount(){
        if(document.querySelectorAll('.react-date-picker__button__input__day')[0]){
            document.querySelectorAll('.react-date-picker__button__input__day')[0].placeholder = 'DD';
            document.querySelectorAll('.react-date-picker__button__input__month')[0].placeholder = 'MM';
            document.querySelectorAll('.react-date-picker__button__input__year')[0].placeholder = 'YYYY';
            document.querySelectorAll('.react-date-picker__button__input__day')[1].placeholder = 'DD';
            document.querySelectorAll('.react-date-picker__button__input__month')[1].placeholder = 'MM';
            document.querySelectorAll('.react-date-picker__button__input__year')[1].placeholder = 'YYYY';
        }

I have included the condition just to make my test case pass for my component.

[wojtekmaj]

@sridhar37 By the way, check react-daterange-picker :)

[gengue]

But when the website UI is based in placeholders instead labels we need a way to display a normal placeholder like this:

<DatePicker
  onChange={this.onChange}
  value={this.state.returnDate}
  placeholder="Return flight date"
/>

that's make sense for you?

[wojtekmaj]

I've replied in your issue, but I'd like to stress, that using placeholders instead of labels, if not done extremely well, may cause accessibility issues.

[mechatroNick]

a simple workaround:

componentDidMount(){
    document.querySelector('.react-date-picker__button__input__day').placeholder = 'Day';
    document.querySelector('.react-date-picker__button__input__month').placeholder = 'Month';
    document.querySelector('.react-date-picker__button__input__year').placeholder = 'Year'
 }

Thank you, I learned a new trick today!

[Mauro74]

Thanks, @amit-carrotsense for the workaround,
In my component, I have used two react-date-picker components one for FROM date and one for TO date
like this,

componentDidMount(){
if(document.querySelectorAll('.react-date-picker__button__input__day')[0]){
document.querySelectorAll('.react-date-picker__button__input__day')[0].placeholder = 'DD';
document.querySelectorAll('.react-date-picker__button__input__month')[0].placeholder = 'MM';
document.querySelectorAll('.react-date-picker__button__input__year')[0].placeholder = 'YYYY';
document.querySelectorAll('.react-date-picker__button__input__day')[1].placeholder = 'DD';
document.querySelectorAll('.react-date-picker__button__input__month')[1].placeholder = 'MM';
document.querySelectorAll('.react-date-picker__button__input__year')[1].placeholder = 'YYYY';
}

I have included the condition just to make my test case pass for my component.

I had the same problem so I've adopted your solution, but how do you test this in Jest?
Thank you

[daedalus28]

A simple solution could be to just take additional optional props to override the placeholders like we already have for calendarIcon and clearIcon - just add dayPlaceholder, monthPlaceholder, and yearPlaceholder. I'd probably also add one for divider as well.

[wojtekmaj]

Fixed in v7.8.0 via ff2ed8019417bb7da0703d8af42bf92eb88f1add. Went for @daedalus28 suggestion. More details in README!

[sandeepemail71]

don't set the initial state (this.state.startDate), This solution works for me

import React from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";
import "react-datepicker/dist/react-datepicker-cssmodules.css";

class DatePickerComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
handleDate: this.props.handleDate,
placeholder: this.props.placeholder
};
this.handleChange = this.handleChange.bind(this);
}

handleChange(date) {
    this.state.handleDate(date);
    this.setState({ startDate: date });
}

render() {
    return (
        <DatePicker
            onChange={this.handleChange}
            dateFormat="yyyy-MM-dd"
            className="react-autosuggest__input"
            placeholderText={this.state.placeholder}
            selected={this.state.startDate}
        />
    );
}

}

export default DatePickerComponent;

[wojtekmaj]

@sandeepemail71 Wrong repository.