Reactjs FormControl 日期答案

【问题标题】：Reactjs FormControl DateReactjs FormControl 日期
【发布时间】：2020-04-29 16:37:43
【问题描述】：

我是前端开发的新手，目前正在使用 React。我正在尝试使用我目前正在使用的日期输入字段。我想格式化输入字段的框、宽度等。

我正在使用带有类型日期的 React bootstrap formcontol。我将如何格式化日期字段的输入？我敢肯定这个问题之前已经被问过，但是我不知道这是怎么回事，我不知道要寻找的正确问题。您是在格式化 FormControl 还是输入字段？你如何区分领域。等等

function renderForm() {
    return (
      <form onSubmit={handleSubmit}>
        <FormGroup controlId="email" bsSize="large">
          <ControlLabel>Email</ControlLabel>
          <FormControl
            autoFocus
            type="email"
            placeholder="Email Address"
            value={fields.email}
            onChange={handleFieldChange}
          />
        </FormGroup>
        <FormGroup controlId="date" bsSize="large">
          <ControlLabel>Birthday</ControlLabel>
          <FormControl
            type="date"
          />
        </FormGroup>
        <FormGroup controlId="password" bsSize="large">
          <ControlLabel>Password</ControlLabel>
          <FormControl
            type="password"
            placeholder="Password"
            value={fields.password}
            onChange={handleFieldChange}
          />
        </FormGroup>
        <FormGroup controlId="confirmPassword" bsSize="large">
          <ControlLabel>Confirm Password</ControlLabel>
          <FormControl
            type="password"
            placeholder="Confirm Password"
            onChange={handleFieldChange}
            value={fields.confirmPassword}
          />
        </FormGroup>
        <LoaderButton
          block
          type="submit"
          bsSize="large"
          isLoading={isLoading}
          disabled={!validateForm()}
        >
          Signup
        </LoaderButton>
      </form>
    );
  }

【问题讨论】：

我不明白，你想自定义你的 html 框来输入日期吗？我的意思是 CSS ？
@BenoitMessiaen 是的，这就是我想要做的。我编辑了原件并附上了一张照片。日期下拉菜单比其他日期短。我想让它和其他的宽度一样。并且可能将里面的文本设置为“2020 年 1 月 1 日。目前它已缩短为 2020 年 1 月 1 日。我还想做其他事情，但如果我知道如何自定义，至少我可以弄清楚其余的大部分。我只是不知道如何访问CSS中的元素，FormControl是一个类吗？等等
我认为这很难做到，尤其是 Jan tu January 部分。你可以看看（这个）[stackoverflow.com/questions/14946091/….如果您真的想完全自定义日期输入，我想您最好从头开始输入文本。祝你好运

标签： reactjs react-bootstrap

【解决方案1】：

@radulle

我试过这个没有用。我不确定这是不是你的意思

<FormGroup controlId="date" bsSize="large">
      <ControlLabel>Birthday</ControlLabel>
      <FormControl
        type="date"
        style={{width:'100%'}}
      />
    </FormGroup>

【讨论】：