https://github.com/smackjax/ez-react-date-input
A date input(but not picker), built with React.
https://github.com/smackjax/ez-react-date-input
date input inputs momentjs react reactjs
Last synced: 11 months ago
JSON representation
A date input(but not picker), built with React.
- Host: GitHub
- URL: https://github.com/smackjax/ez-react-date-input
- Owner: smackjax
- License: mit
- Created: 2018-01-04T18:59:40.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-11T02:15:13.000Z (about 8 years ago)
- Last Synced: 2025-03-08T01:45:57.566Z (12 months ago)
- Topics: date, input, inputs, momentjs, react, reactjs
- Language: JavaScript
- Homepage: https://codesandbox.io/s/zq6l6q9374
- Size: 74.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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`
``` javascript
import {
DateInput,
DateInputWithLabel
} from 'ez-react-date-input';
```
### 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'.
``` javascript
/* onChange will get this object */
{
value: /*2004-08-22*/,
isValid: /*true*/,
name: /*myFormName*/,
year: /*2005*/,
month: /*03*/,
date: /*20*/
}
```
---
## References
### props
##### ``
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](https://momentjs.com/docs/#/displaying/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.
##### ``
* ^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
##### ``
* **date-input-wrapper** - Main wrapper
###### Input children classNames
* **date-input date** - "date input ``"
* **date-input month** - "month select list ``"
* **date-input year** - "year input ``"
##### ``
* **date-input-label-wrapper** - Main label wrapper
* **date-output-wrapper** - Wraps label text `` and date output ``
* **date-label-text** - `` Holding label text
* **date-value-output** - `` With result of date input change
---
##### *"What's with the 'ez'?"*
react-date-input was taken, that's it. No snark intended.