Reactjs FormControl Date

Question

I’m pretty new to front end development and am working with React currently. I’m trying to use a date input field which I currently have working. I want to format the box, the width etc of the input field.

I’m using React bootstrap formcontol with a type date. How would I go about formatting the input of the date field? I’m sure this question has been asked before, but with my little knowledge of how this is don’t I don’t know the correct question to look for. Are you formatting the FormControl or the input field? How do you distinguish the field. Etc

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>
    );
  }

I don't get it, you want to customize your html box for the date input? With CSS I mean? — Benoit Messiaen, Jan 12 '20 at 22:25
@BenoitMessiaen yes that is what I want to do. I edited the original and included a photo. The date drop down is shorter than the rest. I want to make it the same width as the rest. And possibly have the Text inside be “Janurary 1st, 2020. Currently it’s shortened to Jan 1, 2020. There are other things I want to do but if I know how to customize at least I can figure out the rest for the most part. I just don’t know how to access the element in CSS, is FormControl a class? Etc — Football52, Jan 12 '20 at 23:01
I think this is something pretty hard to do, especially the *Jan* tu *January* part. You may look at (this)[https://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker]. If you really want to fully customize your date input, I guess you better have to start from scratch with an text input. Good luck — Benoit Messiaen, Jan 13 '20 at 08:58

score -1 · Answer 1 · answered Jan 13 '20 at 02:09

@radulle

I tried this which did not work. I’m not sure if this is what you meant or not

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

Reactjs FormControl Date

1 Answers1