@mutt/widget-datetime

Mutt Forms Widget - Datetime

Mutt Forms Vue widget for date and time entry.

Field Options

The datetime 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
dateFormat	String	The date fields and the order in which you wish them to appear	'day-month-year'
showTime	Boolean	If true, will display hour, minute and seconds fields after the date fields	false
default	Date or String	The default date to set	null
hideDay	Boolean	Can be used to hide the day field - better to set dateFormat instead where possible	false
dateFieldSeparator	String	A character or string of characters that adds a span containing the character between the date field inputs

Emitted events

When a valid date format is entered (i.e. a complete and existing date) the widget will emit the dateValidated event with the following object:

key: this.field.name,
value: this.field.value,
action: 'populated',
validated, // true if the date passes all other validation rules, e.g min/max
bubble: true,

Complete Example

The following example sets the minumum date to Today minus 40 years and the maximum date to Today minus 4 weeks.

dob: {
  help:
    '<p>If you don’t know the exact date of birth, please provide a considered estimate.</p>',
  label: null,
  max: 'P-4W',
  min: 'P-40Y',
  natural: {
    prefix: ' and you were born on ',
    suffix: '.',
    title: 'What is your date of birth?',
    trigger: '',
  },
  serialize: 'date',
  widget: 'naturaldatetime',
  dateFieldSeparator: '/'
},

The following example sets the date format to year/month/day.

dob: {
  help:
    '<p>If you don’t know the exact date of birth, please provide a considered estimate.</p>',
  label: null,
  dateFormat: 'year-month-day'
  natural: {
    prefix: ' and you were born on ',
    suffix: '.',
    title: 'What is your date of birth?',
    trigger: '',
  },
  serialize: 'date',
  widget: 'naturaldatetime',
},