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

Posted 2023-02-22

【中文标题】使用材料 ui 键盘日期选择器动态设置日期

【英文标题】：Set date dynamically with material ui keyboarddatepicker

【发布时间】：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。是否有任何解决方法可以实现这一目标？提前致谢

【参考方案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
    )
;