Time Element

An element used to render time input using flatpickr.

Examples
Options
Properties
Methods

#Examples

Basic Usage

Renders a time input.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        time: {
          type: 'time',
          default: moment(new Date()).format('HH:mm')
        }
      }
    })
  }
</script>

With Seconds

Time includes seconds with seconds set to true.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        time: {
          type: 'time',
          seconds: true,
          default: moment(new Date()).format('HH:mm:ss')
        }
      }
    })
  }
</script>

12 Hour Format

Time can be provided in a 12 hour format with AM/PM using hour24 option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        time: {
          type: 'time',
          hour24: false,
          format: 'h:i K',
          default: moment(new Date()).format('HH:mm')
        }
      }
    })
  }
</script>

#Options

Name	Type	Description
hour24	`boolean`	Determines if the time should use 24 hours format.
seconds	`boolean`	Determines if seconds should be part of time picker.
format	`string`	Visisble format of the date using flatpickr's formatting tokens.
dataFormat	`string`	Submittable format of the date using momentjs's formatting tokens.
disabled	`boolean`	Whether the field is disabled.
default	`string`	Value of element when the form is initially loaded or reseted.
placeholder	`string`	The placeholder of the element.
floating	`string`	The floating label of the element.
readonly	`boolean`	Whether the field is readonly.
options	`object`	Additional options for flatpickr.

#Properties

Name	Type	Default	Description
disabled	`boolean`	`false`	Whether the field is disabled.
format	`string`	-	Visisble format of the date using flatpickr's formatting tokens. Defaults to elements.time.format from locale.
dataFormat	`string`	-	Submittable format of the date using momentjs's formatting tokens. Defaults to elements.time.dataFormat from locale.
defaultValue	`string`	`null`	Value of element when the form is initially loaded or reseted.
placeholder	`string`	`null`	The placeholder of the element.
floating	`string`	`null`	The floating label of the element.
readonly	`boolean`	`false`	Whether the form element is readonly.
options	`object`	`{}`	Additional options for flatpickr.
datepicker$	`object`	`null`	The flatpickr component.
hour24	`boolean`	`true`	Determines if the time should use 24 hours format.
seconds	`boolean`	`false`	Determines if seconds should be part of time picker.

#Methods

# .disable()

Disabled the field.

# .enable()

Enables the field.

# .formatDate(date)

Parameters

date string : date to be formatted.

Formats a given date to the expected data format.