如何使占位符显示在日期选择器输入上

Question

我的表单中有一个react-datepicker组件，我试图放置一个占位符，上面写着"请选择一个日期"，但日期选择器只显示日期。我做了研究，有些人说占位符仅在selected={...}为假时才显示，但我不知道如何使我的selected={}默认为假并在切换时显示。

我尝试使用反应日期选择器的代码，它placeholderText=""但我无法实现它

这是我的形式;

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

这是我的日期选择器组件;

<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"
                />

Answer 1

placeholderText={'Please select a date'} 

它有效！

Answer 2

似乎您在初始化时将当前日期设置为 bookTime.date。因此，所选值在开始时不会为空。

尝试在初始化时将 bookTime.date 值设置为 false。每当选取新日期时，它 (this.handleChangeDatePicker( 都应更新日期。