Блог

Я хочу показать заполнитель «-выберите дату-» в окне выбора даты, если дата не определена. Возможно ли это?

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

Вы можете указать заполнитель в виде placeholder реквизита.

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

Ознакомьтесь с примером на странице официальной документации для получения дополнительной информации.

ОК. решение состоит в том, чтобы добавить функцию labelFunc prop

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

Да, ты можешь. не перегружайтесь пустыми значениями и материалами, это один из многих подходящих вариантов, которые вы можете сделать.

Попробуйте это:

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