UNPKG

@mutt/widget-datetime

Version:
66 lines (59 loc) 2.15 kB
# 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', }, ```