使用材料 ui 键盘日期选择器动态设置日期答案

【问题标题】：Set date dynamically with material ui keyboarddatepicker使用材料 ui 键盘日期选择器动态设置日期
【发布时间】：2021-04-30 01:46:06
【问题描述】：

我正在使用 material-ui/pickers 中的 KeyboardDatePicker，它运行良好。但是我的表单中有多个日期选择器，我想将状态设置为

   
  const [selectedDate, setSelectedDate] = useState({
    selectedFromDate: new Date(),
    selectedToDate: new Date(),
  });

  // jsx
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
              <KeyboardDatePicker
                id="selectedFromDate"
                label="From Date"
                format="dd/MM/yyyy"
                value={selectedDate.selectedFromDate}
                onChange={handleDateChange}
                KeyboardButtonProps={{
                  "aria-label": "change date",
                }}
              />
          </MuiPickersUtilsProvider>
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
              <KeyboardDatePicker
                id="selectedToDate"
                label="To Date"
                format="dd/MM/yyyy"
                value={selectedDate.selectedToDate}
                onChange={handleDateChange}
                KeyboardButtonProps={{
                  "aria-label": "change date",
                }}
              />
          </MuiPickersUtilsProvider>

    const handleDateChange = (e) => {
    
    // here `e` is `DateIOType` and not event 
      setSelectedDate({
        ...selectedDate,
        [e.target.id]: e.target.value
      })
    };

但我找不到在KeyboardDatePicker 中获取event 属性的方法，它们仅在(date: DateIOType, value?: string | null) 中提供documentation。是否有任何解决方法可以实现这一目标？提前致谢

【问题讨论】：

标签： reactjs datepicker material-ui

【解决方案1】：

由于 Id 没有返回，为 selectedFieldFor 添加一个状态变量：

const [selectedFieldFor, setSelectedFieldFor] = useState("")
const [selectedDate, setSelectedDate] = useState({
    selectedFromDate: new Date(),
    selectedToDate: new Date(),
});
              
<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDatePicker
        id="selectedFromDate"
        ......
        onClick={() => setSelectedFieldFor("selectedFromDate")}
    />
</MuiPickersUtilsProvider>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDatePicker
        id="selectedToDate"
        ......
        onClick={() => setSelectedFieldFor("selectedToDate")}
    />
</MuiPickersUtilsProvider>

const handleDateChange = (e) => {
    setSelectedDate({
        ...selectedDate,
        selectedFieldFor: e.target.value
    })
};

【讨论】：