如何在 KeyboardDatePicker 中顯示自定義文本（占位符）

Question

如果沒有定義日期，我想在 datepicker 中顯示“-select date-”placeHolder。 那可能嗎？

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDatePicker
        disableToolbar
        variant="inline"
        format="MM/dd/yyyy"
        margin="normal"
        id="date-picker-inline"
        disablePast
    />
</MuiPickersUtilsProvider>

Answer 1

您可以以占位placeholder道具的形式提供占位符。

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDatePicker
        placeholder='-select date-'
        disableToolbar
        variant="inline"
        format="MM/dd/yyyy"
        margin="normal"
        id="date-picker-inline"
        disablePast
    />
</MuiPickersUtilsProvider>

查看官方文檔頁面上的示例以獲取更多信息。

Answer 2

好的。 解決方案是添加 labelFunc 道具

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDatePicker
        disableToolbar
        variant="inline"
        format="MM/dd/yyyy"
        margin="normal"
        id="date-picker-inline"
        labelFunc={() => selectedDate || '- Select date -'}
        disablePast
    />
</MuiPickersUtilsProvider>

甚至更好（假設默認日期值 == null）：

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDatePicker
        disableToolbar
        variant="inline"
        format="MM/dd/yyyy"
        margin="normal"
        id="date-picker-inline"
        emptyLabel="- Select Date -"
        disablePast
    />
</MuiPickersUtilsProvider>

Answer 3

是的，你可以。 不要被null值和東西弄得不知所措，這是您可以做的許多合適的選擇之一。

試試這個：

//You need all of these imports (a must)
import DateFnsUtils from '@date-io/date-fns';
import Moment from 'moment';
import { MuiPickersUtilsProvider, KeyboardDatePicker  } from "@material-ui/pickers";

//you need this too (a must)
const [selectDate, handleChangeSelectDate] = useState(null);

//Finally this is final thing you need
<MuiPickersUtilsProvider utils={DateFnsUtils}>
   <KeyboardDatePicker
      id="date-picker-inline"
      autoOk
      placeholder='-select date-'
      inputStyle={{ textAlign: 'center' }}
      variant="inline"
      inputVariant="outlined"
      format="MMM/dd/yyyy" //Can use MM if you want to show only number of month
      value={selectDate? moment(selectDate) : null}
      InputAdornmentProps={{ position: "start" }} //just use to put calendar icon on start or left position - remove it if you want it on end of the box or right hand side
      onChange={date => handleChangeSelectDate(date)}
   />
</MuiPickersUtilsProvider>

PS：希望這對您有所幫助，如果您仍然無法正常工作，請告訴我。 快樂編碼！