Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@mutt/widget-datetime

Package Overview
Dependencies
Maintainers
15
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mutt/widget-datetime

Mutt Forms Widget - Date and Time Input

  • 1.7.0-beta.0
  • customised-errors-0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
Maintainers
15
Weekly downloads
 
Created
Source

Mutt Forms Widget - Datetime

Mutt Forms Vue widget for date and time entry.

Field Options

The datetime widget accepts the following options:

optiontypedescriptiondefault
minISO-8601 formatted StringThe minimum date allowednull
maxISO-8601 formatted StringThe maximum date allowednull
dateFormatStringThe date fields and the order in which you wish them to appear'day-month-year'
showTimeBooleanIf true, will display hour, minute and seconds fields after the date fieldsfalse
defaultDate or StringThe default date to setnull
hideDayBooleanCan be used to hide the day field - better to set dateFormat instead where possiblefalse
dateFieldSeparatorStringA 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',
},

Keywords

FAQs

Package last updated on 24 Feb 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc