Add support for datetime fields (date and time in same field)

[ebbeknudsen]

I've added support for datetime fields, since I needed it in a project.

Initialising is done in one of the following ways:

Default

var cleave = new Cleave(".input-element", {
  date: true,
  time: true
});

This will initialise the datetime field, adhering to the current default date and time formats and the default delimiters ['d', 'm', 'Y'] and ['h', 'm', 's']. Which means that the format will be dd/mm/yyyy hh:mm:ss (31/12/1990 23:59:59).

Custom patterns
One or both of the patterns can be customized like this:

var cleave = new Cleave(".input-element", {
  date: true,
  datePattern: ['m', 'd'],
  time: true,
  timePattern: ['h', 'm']
});

Which will initialise with the format mm/dd hh:mm (12/31 23:59)

Custom delimiters
At the same time, the delimiters can be overriden like this:

var cleave = new Cleave(".input-element", {
  date: true,
  time: true,
  delimiters: ['-', '-', ' at ', '.', '.']
});

Which will initialise with the format dd-mm-yyyy at hh.mm.ss (31-12-2020 at 23.59.59)

Custom patterns and delimiters
Both patterns and delimiters can be customized at the same time, eg.:

var cleave = new Cleave(".input-element", {
  date: true,
  datePattern: ['m', 'd'],
  time: true,
  timePattern: ['h', 'm'],
  delimiters: ['-', ' at ', '.']
});

Which will initialise with the format mm-dd at hh.mm (12-31 at 23:59)

[avocade]

Very cool, just what we were looking for :D

[tcp]

Good stuff :)

[nabc]

Thanks, this is needed in our project, but when it's going to be merged??

[carlospauluk]

This is needed in our project too, but when it's going to be merged??

[arcadeJHS]

Is it already merged? It does not seem working wrapping Cleave in a Vue3 directive.

[ErikPilsits-RJW]

Wanted to add my interest in this enhancement as well. Nice job!