Feedback

[ajsnorris]

Ever consider adding an optional Feedback component? I love this package and want to make use of it, but I need validation support.

[afialapis]

Hi, and thanks!

The Feedback component is out of scope for this package.

When using Reactstrap, each form field will look like:

<FormGroup>

  <Label for="my_field">
    {"My Field"}
  </Label>

  <InputGroup>
    <InputGroupAddon addonType="prepend">
      <InputGroudAddonText>
        <img src="some/icon/here.png"/>
      </InputGroudAddonText>
    </InputGroupAddon>

    {/* here starts reactstrap-date-picker intervention */}
    <Input type="date" 
      value={myFieldValue} 
      onChange={(event) => setMyFieldValue(event.target.value)}
      valid={myFieldValue!=''}/>
    {/* and here ends */}

  </InputGroup>

  <FormFeedback>
    {"Hey, fill me!"}
  </FormFeedback>

</FormGroup>

And reactstrap-date-picker cares just about the <Input> component there. Feedback is not and won't be a part of reactstrap-date-picker. So it's up to you how to build every form field, how to style them (you can pass props like className or style to reactstrap-date-picker that could help you to do so), etc.

I invite you to give a look at valium-reactstrap (https://github.com/afialapis/valium-reactstrap), another project from us. It combines reactstrap and valium(https://github.com/afialapis/valium), which is focused exclusively on Forms validation, giving for it a different perspective than other Form validation packages.

More precisely, you may check this component. There you can see how reactstrap-date-picker is integrated and being part of the validation process without any special needing. It just does this:

  <DatePicker {...}
    className   = {valid ? 'is-valid' : 'is-invalid'}/>

So bootstrap validation default styling is applied to the reactstrap-date-picker input.

Another alternative for you, may be using the customControl prop, as explained in the docs.

[ajsnorris]

Thanks so much for your quick and thorough response! I'll look into all that you suggested.