Enhance input tags for collecting age information using data- attributes and simple wireup JavaScript.

npm install age-picker

Or, load this script manually: https://unpkg.com/age-picker@latest/lib/age-picker.min.js -- This targets the latest version, which may include breaking changes for major version updates. A specific version can be targeted to avoid potential breaking changes. See https://unpkg.com for more information.

<label for="age">Age or DOB</label>
<input type="text" id="age" name="age" data-age-picker />

<label for="direct-entry-only-age">Age or DOB (direct entry only)</label>
<input type="text" id="direct-entry-only-age" name="direct-entry-only-age" data-age-picker-direct-entry-only />

new AgePicker().init();

• Decorate input tags with a data-age-picker or data-age-picker-direct-entry-only attribute.
• Run new AgePicker().init();, optionally specifying the scope in the parameter (defaults to document.body).

Configuration options can be specified in the AgePicker constructor. Example:

new AgePicker({
  selectClasses: ['form-control']
}).init();

Scan the domScope and wire up any elements matching this.configuration.dataAttribute.

Create the age picker assets targeting element. Used by init().

Note: Events should be used rather than listening for keyup, change, etc. on the <input data-age-picker> tag, since a hidden input becomes the source of truth for the over-the-wire 'age'.

Raised on the input element when the age is changed or cleared by any forms of user input (both direct entry and year, month, day inputs). This event includes the age value.

Our use cases dictate collecting the month and day from the user. However, other or future use cases may allow for using today's date. By using today's date with a provided year age could be calculated. This feature does not currently exist, but was considered.

Currently supports Gregorian calendar using English language only. Additional languages can be supported by overriding the i18n configuration.

• npm install
• npm run build or npm run watch, then open demo/index.html in a browser.
• npm test to run tests.
• npm run lint to run linter.

MIT