ez-react-date-input

1.0.1 • Public • Published

ez-react-date-input

"It's an input, not a picker!"

...not that I have anything against date pickers, but I just wanted something simple looking that could serve its purpose on small phone screens too. And then I remembered nothing is simple. So if this helps someone else, then awesome.

Usage

npm install --save ez-react-date-input

import {
    DateInput,
    DateInputWithLabel
} from 'ez-react-date-input';
 
<DateInput
id="myDateInput"
className="myDateInputClass"
invalidColor="#d65151"
 
value="Aug 22, 2004"
inputFormat="MMM DD, YYYY"
onChange={customHandleChange}
name="myFormName"
 
outputFormat="YYYY-MM-DD"
formFormat="YYYY-MM-DD"
 
minYear={2004}
maxYear={2004}
 
valueOnMount={false}
validateFunc={customValidate}
/>
 
<DateInputWithLabel 
{/*^Everything from DateInput */}
className=""
id=""
labelText="from"
/>
 

Important stuff

  • If 'value' is set then onChange must update the source of 'value'. Otherwise, value will overwrite input changes.
  • Default input and output formats are 'YYYY-MM-DD'.
/* onChange will get this object */
{
    value: /*2004-08-22*/,
    isValid: /*true*/,
    name: /*myFormName*/,
 
    year: /*2005*/,
    month: /*03*/,
    date: /*20*/
}

References

props

<DateInput>

Children classNames are "date-input date", "date-input month", "date-input year", and "hidden-form-value"

  • id - Given to wrapper. (id) + ("-date", "-month", "-year) is given to the inputs for label handling.

  • className - Given to wrapper, appended onto "date-input-wrapper"

  • invalidColor - Must be a css string color value(hex, rgb(), 'orange'). Applied to input font if they're invalid.

  • value - Date value to be parsed, then initialized into inputs

  • onChange - Passed an object on each input change

  • name - Form name for hidden input

The 'format' props take any strings that can be passed into moment.format All default to "YYYY-MM-DD"

  • inputFormat - Format for parsing props.value

  • outputFormat - Format for the returned (results).value into onChange

  • formFormat - Format to store in formInput

  • minYear - Minimum allowed year

  • maxYear - Maximum allowed year

  • valueOnMount - When 'true', the onChange function will be run on component mount. If no value is passed in to set initial date, will default to the present date.

  • validateFunc - Recieves a moment object built from the current state values as final 'isValid' check, before onChange result. Must return true if valid, false if not.

<DateInputWithLabel>
  • ^All the props from DateInput
  • id - Given to container label. Inner input will get (id)+"-input"
  • className - Given to container label, appended to "date-input-label-wrapper ". Inner input will get (className)+"-input"
  • labelText - Placed before the string output.

Default classNames

<DateInput />
  • date-input-wrapper - Main wrapper
Input children classNames
  • date-input date - "date input <input type="text">"
  • date-input month - "month select list <select>"
  • date-input year - "year input <input type="text">"
<DateInputWithLabel>
  • date-input-label-wrapper - Main label wrapper
  • date-output-wrapper - Wraps label text <span> and date output <span>
  • date-label-text - <span> Holding label text
  • date-value-output - <span> With result of date input change

"What's with the 'ez'?"

react-date-input was taken, that's it. No snark intended.

Package Sidebar

Install

npm i ez-react-date-input

Weekly Downloads

1

Version

1.0.1

License

MIT

Last publish

Collaborators

  • smackjax