How can i make my placeholder show on datepicker input?

Question

I have a react-datepicker component inside my form and i am trying to put a placeholder which says "please select a date" but datepicker only shows the date.I did research and some people say placeholder shows only if selected={...} is false but i don't know how to make my selected={} false on default and show on toggle.

I tried to use react-datepicker's code,it is placeholderText="" but i couldn't implemented it

this is my state in my form;

bookTime: {
          data: new Date(),
          name: "bookTime",
          category: "text",
          everFocused: false,
          isValid: true,         
          extra : {
            label:"Randevu Tarihi*",
            help: "Geçersiz Alan!"
          }
       },

this is my datepicker component;

<DatePicker className="turkish"
                  locale={tr}
                  placeholderText="Please select a date"
                  onChange={this.handleChangeDatePicker}
                  onChangeRaw={this.handleDateChangeRaw}
                  selected={bookTime.data }

                  showTimeSelect
                  minTime={setHours(setMinutes(new Date(), 0), 7)}
                  maxTime={setHours(setMinutes(new Date(), 0), 22)}
                  minDate={subDays(new Date(), 0)}

                  timeFormat="HH:mm"
                  timeIntervals={60}
                  dateFormat="HH:mm,d MMMM yyyy"
                  timeCaption="Saat"

                />

Judicature

Answer 1

It seems like you are setting the current date as the bookTime.date at the initialization. So the selected value will not be empty at the start.

Try setting bookTime.date value to false at the initialization. Whenever a new date is picked, it (this.handleChangeDatePicker) should update the date.

Duality

sorry i am a beginner i know how to make a state false but i don't know how to make value to false at the initialization :( – Judicature

just replace data: new Date() with data: false – Duality

Answer 2

placeholderText={'Please select a date'} 

It work!

Pryer