Age Picker

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

Try out a demo!

Example

Installation

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.

Quickstart

<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();

Usage

• 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();

Configuration options

Option	Description	Default Value
defaultDomScope	The default DOM scope to scan for dataAttribute items.	document.body
dataAttribute	The data- attribute to scan for.	'data-age-picker'
directEntryOnlyDataAttribute	The data- attribute to scan for supporting direct entry only.	'data-age-picker-direct-entry-only'
useDateAttribute	The data- attribute to transmit the date, rather than the age.	'data-age-picker-use-date'
prefixClass	The prefix for CSS classes used by other configuration CSS classes.	'age-picker'
containerClass	The container class surrouding the age picker and all related DOM assets.	${this.configuration.prefixClass}-container
monthSelectClass	The select tag to select the month.	${this.configuration.prefixClass}-month
daySelectClass	The select tag to select the day.	${this.configuration.prefixClass}-day
selectClasses	An array of custom classes to apply to month and day select elements.	[]
i18n	Internationalization data, defaults to US English.	{ months: [...] }

Methods

init(domScope = this.configuration.defaultDomScope)

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

create(element)

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

Events

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'.

ageChanged

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.

Notes

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.

Development

• 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.

License

MIT