@mutt/widget-datetime NPM

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

mutt-forms mutt-forms-vue datetime forms

@mutt/forms @mutt/widgets-vue moment rollup-plugin-babel vue

@infinitebrahmanuniverse/nolb-_mut @everything-registry/sub-chunk-627 @zalastax/nolb-_mut

3 years ago

3 years ago

3 years ago

3 years ago