How can i make a placeHolder visible while making my Datepicker component controlled( value = dateOfBirth)

Question

I was implementing a Datepicker in antd but i wanted the input bar to show me the placeholder but instead it shows me the initial state value here is the code

 <DatePicker 
        value={dateOfBirth}
        placeholder="Date of Birth"
        format={dateFormat}
        onChange={(date) => setDateOfBirth(date)} />

Now i wanted the placeholder to be visible at the same time i want the datepicker component to be a controlled componenent.But i couldn't make the placeholder visible unless i remove value={dateOfBirth} as a result which makes my component uncontrolled component. so is there any way to achieve both properties at the same time.

Answer 1

Since you're passing a moment object as the default value, the date picker component will use that as its initial value and that's why it's not displaying the placeholder, since placeholders are only used when there is no value. You need to set the initial state value to null.

const [dateOfBirth, setDateOfBirth ] = useState(null);