@mutt/widget-datetime

Mutt Forms Widget - Date and Time Input

Usage no npm install needed!

<script type="module">
  import muttWidgetDatetime from 'https://cdn.skypack.dev/@mutt/widget-datetime';
</script>

README

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',
},