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

Posted 2023-03-05

【中文标题】如何在日期选择器输入上显示占位符？

【英文标题】：How can i make my placeholder show on datepicker input?

【发布时间】：2019-11-22 04:54:15

【问题描述】：

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

我尝试使用 react-datepicker 的代码，它是 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"

                />

【参考方案1】：

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

尝试在初始化时将 bookTime.date 值设置为 false。每当挑选新日期时，它（此AwardleChangedatePicker）应该更新日期。

【讨论】：

对不起，我是一个初学者，我知道如何将状态设为 false，但我不知道如何在初始化时将值设为 false :(

只需将 data: new Date() 替换为 data: false