{"id":22814182,"url":"https://github.com/smackjax/ez-react-date-input","last_synced_at":"2025-03-30T22:15:34.607Z","repository":{"id":57150449,"uuid":"116296530","full_name":"smackjax/ez-react-date-input","owner":"smackjax","description":"A date input(but not picker), built with React.","archived":false,"fork":false,"pushed_at":"2018-01-11T02:15:13.000Z","size":76,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-08T01:45:57.566Z","etag":null,"topics":["date","input","inputs","momentjs","react","reactjs"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/zq6l6q9374","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smackjax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-04T18:59:40.000Z","updated_at":"2019-07-24T15:50:22.000Z","dependencies_parsed_at":"2022-09-03T17:52:01.898Z","dependency_job_id":null,"html_url":"https://github.com/smackjax/ez-react-date-input","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smackjax%2Fez-react-date-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smackjax%2Fez-react-date-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smackjax%2Fez-react-date-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smackjax%2Fez-react-date-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smackjax","download_url":"https://codeload.github.com/smackjax/ez-react-date-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246385414,"owners_count":20768672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["date","input","inputs","momentjs","react","reactjs"],"created_at":"2024-12-12T13:07:31.238Z","updated_at":"2025-03-30T22:15:34.585Z","avatar_url":"https://github.com/smackjax.png","language":"JavaScript","readme":"# ez-react-date-input\n###### *\"It's an input, not a picker!\"*\n\n...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. \nAnd then I remembered nothing is simple.\nSo if this helps someone else, then awesome. \n\n## Usage\n`npm install --save ez-react-date-input`\n\n``` javascript\nimport {\n    DateInput,\n    DateInputWithLabel\n} from 'ez-react-date-input';\n\n\u003cDateInput\nid=\"myDateInput\"\nclassName=\"myDateInputClass\"\ninvalidColor=\"#d65151\"\n\nvalue=\"Aug 22, 2004\"\ninputFormat=\"MMM DD, YYYY\"\nonChange={customHandleChange}\nname=\"myFormName\"\n\noutputFormat=\"YYYY-MM-DD\"\nformFormat=\"YYYY-MM-DD\"\n\nminYear={2004}\nmaxYear={2004}\n\nvalueOnMount={false}\nvalidateFunc={customValidate}\n/\u003e\n\n\u003cDateInputWithLabel \n{/*^Everything from DateInput */}\nclassName=\"\"\nid=\"\"\nlabelText=\"from\"\n/\u003e\n\n```\n\n### Important stuff\n* **If 'value' is set** then onChange *must* update the source of 'value'. Otherwise, value will overwrite input changes.\n* Default input and output formats are 'YYYY-MM-DD'.\n``` javascript\n/* onChange will get this object */\n{\n    value: /*2004-08-22*/,\n    isValid: /*true*/,\n    name: /*myFormName*/,\n\n    year: /*2005*/,\n    month: /*03*/,\n    date: /*20*/\n}\n```\n\n---\n## References\n### props\n##### `\u003cDateInput\u003e`\nChildren classNames are \"date-input date\", \"date-input month\", \"date-input year\", and \"hidden-form-value\"\n* **id** - Given to wrapper. (id) + (\"-date\", \"-month\", \"-year) is given to the inputs for label handling.\n* **className** - Given to wrapper, appended onto \"date-input-wrapper\"\n* **invalidColor** - Must be a css string color value(hex, rgb(), 'orange'). Applied to input font if they're invalid.\n\n* **value** - Date value to be parsed, then initialized into inputs\n* **onChange** - Passed an object on each input change\n* **name** - Form name for hidden input\n\nThe 'format' props take any strings that can be passed into [moment.format](https://momentjs.com/docs/#/displaying/format/)\nAll default to \"YYYY-MM-DD\"\n* **inputFormat** - Format for parsing props.value\n* **outputFormat** - Format for the returned (results).value into onChange\n* **formFormat** - Format to store in formInput\n\n* **minYear** - Minimum allowed year\n* **maxYear** - Maximum allowed year\n\n* **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.\n* **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.\n\n\n##### `\u003cDateInputWithLabel\u003e`\n* ^All the props from DateInput\n* **id** - Given to container label. Inner input will get (id)+\"-input\"\n* **className** - Given to container label, appended to \"date-input-label-wrapper \". Inner input will get (className)+\"-input\"\n* **labelText** - Placed before the string output.\n---\n\n### Default classNames\n##### `\u003cDateInput /\u003e`\n* **date-input-wrapper** - Main wrapper\n\n###### Input children classNames\n* **date-input date** - \"date input `\u003cinput type=\"text\"\u003e`\"\n* **date-input month** - \"month select list `\u003cselect\u003e`\"\n* **date-input year** - \"year input `\u003cinput type=\"text\"\u003e`\"\n\n##### `\u003cDateInputWithLabel\u003e`\n* **date-input-label-wrapper** - Main label wrapper\n* **date-output-wrapper** - Wraps label text `\u003cspan\u003e` and date output `\u003cspan\u003e`\n* **date-label-text** - `\u003cspan\u003e` Holding label text\n* **date-value-output** - `\u003cspan\u003e` With result of date input change\n---\n\n##### *\"What's with the 'ez'?\"*\nreact-date-input was taken, that's it. No snark intended.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmackjax%2Fez-react-date-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmackjax%2Fez-react-date-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmackjax%2Fez-react-date-input/lists"}