Mutt Forms Widget - Age

Mutt Form Vue widget to capture an age in years & months

Requirements

Please ensure you install the peer dependencies which are defined in package.json.

Select dropdown styling

This widget makes use of the vue-select component.

No styling is included for this component, you will need to include it by either including the CSS from the component:

import 'vue-select/dist/vue-select.css';

or importing the SCSS:

@import "vue-select/src/scss/vue-select.scss";

More details on styling the dropdown can be found in the documentation for vue-select.

Field Options

The age widget accepts the following options:

option | type | description | default ------ | ---- | ----------- | ------- min | ISO-8601 formatted String | The minimum date allowed | null max | ISO-8601 formatted String | The maximum date allowed | null default | Date or String | The default date to set | null dateFieldSeparator | String | A character or string of characters that adds a span containing the character between the date field inputs attrs | Object of Strings or Numbers | The html attributes for the field wrapper e.g data-* | null

Please note here that min/max refer to the minimum & maximum dates returned by the widget rather than the age, therefore max should resolve to a later date value than min

Emitted Events

When a valid entry of years & months is entered, the widget will emit the ageValidated event with the following object:

key: this.field.name,
value: this.field.value,
action: 'populated',
validated, // true if the validation rules pass
bubble: true,

Complete Example

dob: {
  help:
    '<p>If you don’t know the exact age, please provide a considered estimate.</p>',
  label: null,
  max: 'P-4W',
  min: 'P-21Y',
  attrs: {
    data-qa-locator: 'pet-info-age-selector'
  },
  natural: {
    prefix: ' and you are ',
    suffix: ' old.',
    title: 'How old are you?',
    trigger: '',
  },
  serialize: 'date',
  widget: 'naturalage',
},