Placeholder not showing

[Joramt]

<Datepicker placeholderText="Click to select a date" selected={this.state.startDate}

The problem is that the datepicker show the date selected instead of the placeholder text. If i ever remove the selected attribute, the whole component stop working ( this behaviour is expected ). I've tried to change the startDate state by an empty string or an empty object and i got an error.

So i dont quite get the logic of this, the placeholder functionality is only working when the datepicker isn't ?

[rafeememon]

To have no date selected you should set selected to null.

If i ever remove the selected attribute, the whole component stop working ( this behaviour is expected ).

Can you elaborate more on how it stops working? Why is this expected?

[Joramt]

Yup, i figured out that one a bit after i posted :p you might want to check your examples on your demo site, there's one with a placeholder and no selected attribute and it doesn't work. This is an expected behavior because if you dont bind the datepicker component value to a state via the selected attribute, it's more than obvious that it wont work ( you are basically giving it no value to display )

Anyway thnk for the reply, the datepicker is also a great tool that we use a lot !

[annetters]

This caught me as well. The demo does not explain that the placeholder won't appear if the date is there. But changes to null worked.

class DatePickerContainer extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            startDate: ''

            // Enable this if you want todays date to appear by default
            // startDate: moment()
        };
        this.handleChange = this.handleChange.bind(this);
    }

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

    render() {
        return <DatePicker
            selected={this.state.startDate}
            onChange={this.handleChange}
            placeholderText="MM/DD/YYYY"
        />;
    }
}

[baoqchau]

This will work but because theDatePicker is expecting a moment object, if we initialize it with a null string, it will print an error to the console: Failed prop type: Invalid prop 'selected' of type 'string' supplied to 'DatePicker', expected 'object'

[jacksonv1lle]

@baoqchau To resolve that problem you can do this: selected={this.state.startDate==="" ? null : moment()}

[gazedash]

I can replicate this. The selected prop is set to null, placeholderText is present, but there is no text shown.

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

[Jamal8548]

HERE YOU GO! SOLUTION BY JAMAL

DateRangePicker with two inputs and placeholders!

function App(){ const [startDate, setStartDate] = useState(); const [endDate, setEndDate] = useState(); return( <> <DatePicker placeholderText="Click to enter the start date" selected={startDate===" " ? null : startDate} onChange={(date) => new Date(setStartDate(date))} selectsStart startDate={startDate} endDate={endDate} /> <DatePicker placeholderText="Click to enter the end date" selected={endDate===" "? null : endDate} onChange={(date) => new Date(setEndDate(date))} selectsEnd startDate={startDate} endDate={endDate} minDate={startDate} /> </> ) } export default App