Datetime Element

An element used to render date-time input using flatpickr.

Examples
Options
Properties
Methods

#Examples

Basic Usage

Renders a date-time input.

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

With Seconds

Time includes seconds with seconds set to true.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        datetime: {
          type: 'datetime',
          seconds: true,
          default: moment(new Date()).format('YYYY-MM-DD 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: {
        datetime: {
          type: 'datetime',
          hour24: false,
          default: moment(new Date()).format('YYYY-MM-DD HH:mm'),
          format: 'Y-m-d h:i K'
        }
      }
    })
  }
</script>

Form `data`:

(In America/Los_Angeles timezone):

Converting Timezone

Converting user's timezone to app's timezone (America/Los_Angeles) with convertTimezone option.

          
<script>
  import moment from 'moment-timezone';

  if(!window.moment.tz){
    window.moment = moment;
  }

  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        datetime: {
          type: 'datetime',
          convertTimezone: true,
          default: moment(new Date()).format('YYYY-MM-DD 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.
min	`string`	Earliest selectable date.
max	`string`	Latest selectable date.
disable	`array`	List of dates to be disabled.
convertTimezone	`boolean`	Whether timezone conversion should be made.
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.datetime.format from locale.
dataFormat	`string`	-	Submittable format of the date using momentjs's formatting tokens. Defaults to elements.datetime.dataFormat from locale.
min	`string`	`null`	Earliest selectable date.
max	`string`	`null`	Latest selectable date.
disables	`array`	`[]`	List of dates to be disabled.
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.
convertTimezone	`boolean`	`false`	Determines if the user's timezone should be converted to app's timezone.
timezone	`string`	-	The timezone of the application.
userTimezone	`string`	-	The timezone of the user.

#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.

# .toAppTimezone(date) @returns {string}

Parameters

date string : date to be converted.

Converts the date from user's timetzone to app's timezone.

# .toUserTimezone(date) @returns {string}

Parameters

date string : date to be converted.

Converts the date from app's timetzone to user's timezone.