reactjs 带有react的UI上的日期格式以及如何解决它

0tdrvxhp  于 2023-03-01  发布在  React
关注(0)|答案(1)|浏览(110)

当我在UI中运行应用程序时,我看到两个输入,一个是"from",一个是"to",类型是date。后端的默认值是"2016 - 01 - 01 00:00:00,2022 - 04 - 15 23:59:59",但它是一个动态值。但我收到此错误:enter image description here,如果您看到它被认为是HH:MM,而不是HH:MM:SS,后端的格式也是:时:分:秒
这是我写的代码

const handleInputChange = (val, id, column, type) => {

    let formattedVal = val;
    if (type.toLowerCase() === "datetime-local") {
      formattedVal = formattedVal.replace("T", " ") + ":00";
    }
    let pRB = { ...postRequestBody };
    pRB[selectedReport.report_id] = {
      ...pRB[selectedReport.report_id],
      [id]: formattedVal,
    };
    dispatch(setPostRequestBody(pRB));
  };

以及:

case "date":
      if (isRange) {
        return (
          <div
            style={{
              width: "100%",
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <div style={{ width: "48%" }}>
              <label htmlFor={id+'1'}>From</label>
              <TextInput
                error={errorFileds.includes(id + "1")}
                id={id + "1"}
                type={"datetime-local"}
                step={1}
                isTextArea={inputFieldSettings[id]?.isTextArea}
                value={postRequestBody[selectedReport.report_id][id + "1"]}
                handleInputChange={handleInputChange}
                placeholder="From"
                inputProps={{
                  min: min.replace(" ", "T"),
                  max: max.replace(" ", "T"),
                }}
              />
            </div>
            <div style={{ width: "48%" }}>
              <label htmlFor={id + "2"}>To</label>
              <TextInput
                error={errorFileds.includes(id + "2")}
                id={id + "2"}
                type={"datetime-local"}
                step={1}
                isTextArea={inputFieldSettings[id]?.isTextArea}
                value={postRequestBody[selectedReport.report_id][id + "2"]}
                handleInputChange={handleInputChange}
                placeholder="To"
                inputProps={{
                  min: min.replace(" ", "T"),
                  max: max.replace(" ", "T"),
                }}
              />
            </div>
          </div>
        );
      }

      return (
        <TextInput
          error={errorFileds.includes(id)}
          id={id}
          type={"date"}
          // type={selectType(type)}
          isTextArea={inputFieldSettings[id]?.isTextArea}
          value={postRequestBody[selectedReport.report_id][id]}
          handleInputChange={handleInputChange}
          inputProps={{
            min: min.replace(" ", "T"),
            max: max.replace(" ", "T"),
          }}
        />
      );

现在我不知道为什么我会收到这个错误,因为我改变了这个代码中的许多东西,但错误仍然提醒。

k4emjkb1

k4emjkb11#

当您希望具有**“datetime-local”**时,必须考虑 inputProps 中的步骤,因为在MUI中,默认情况下它支持HH:MM,因此:

inputProps={{
                  min: min.replace(" ", "T"),
                  max: max.replace(" ", "T"),
                  step: 1,
                }}

如此简单:)))

相关问题