Date Element

An element used to render date input using flatpickr.

Examples
Options
Properties
Methods

#Examples

Basic Usage

Renders a date input.

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

Multiple Dates

Allows to select multiple dates with mode 'multiple'.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        date: {
          type: 'date',
          mode: 'multiple',
          default: [
            moment(new Date()).format('YYYY-MM-DD'),
            moment(new Date()).add(1, 'DAYS').format('YYYY-MM-DD'),
          ]
        }
      }
    })
  }
</script>

Form `data`:

Date Range

Allows to select a date range with mode 'range'.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        date: {
          type: 'date',
          mode: 'range',
          default: [
            moment(new Date()).format('YYYY-MM-DD'),
            moment(new Date()).add(7, 'DAYS').format('YYYY-MM-DD'),
          ]
        }
      }
    })
  }
</script>

Limited Dates

Allows to select date only between a start and end period with min max.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        date: {
          type: 'date',
          min: moment(new Date()).subtract(7, 'DAYS').format("YYYY-MM-DD"),
          max: moment(new Date()).add(7, 'DAYS').format("YYYY-MM-DD"),
          default: moment(new Date()).format('YYYY-MM-DD')
        }
      }
    })
  }
</script>

Disabled Dates

Disable certain dates with disable.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        date: {
          type: 'date',
          disables: [
            today(-4), today(-2), today(-1), today(1), today(3), today(5)
          ],
          default: today()
        }
      }
    })
  }

  const today = function (days) {
    if (!days) {
      return moment(new Date()).format("YYYY-MM-DD")
    }

    if (days < 0) {
      return moment(new Date()).subtract(days * -1, 'DAYS').format("YYYY-MM-DD")
    }

    return moment(new Date()).add(days, 'DAYS').format("YYYY-MM-DD")
  }
</script>

Form `data`:

Formatted Date

Custom format of visible and submitted date with format and dataFormat.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        date: {
          type: 'date',
          format: 'M j, Y',
          dataFormat: 'YYYY-MM-DD',
          default: moment(new Date()).format("MMM D, YYYY")
        }
      }
    })
  }
</script>

#Options

Name	Type	Description
mode	`string`	Flatpickr's mode option. Possible values: `single`, `multiple` or `range`.
format	`string`	Visisble format of the date using flatpickr's formatting tokens. Defaults to elements.date.format from locale.
dataFormat	`string`	Submittable format of the date using momentjs's formatting tokens. Defaults to elements.date.dataFormat from locale.
min	`string`	Earliest selectable date.
max	`string`	Latest selectable date.
disables	`array`	List of dates to be disabled.
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.
mode	`string`	`'single'`	Flatpickr's mode option. Possible values: `single`, `multiple` or `range`.
format	`string`	-	Visisble format of the date using flatpickr's formatting tokens. Defaults to elements.date.format from locale.
dataFormat	`string`	-	Submittable format of the date using momentjs's formatting tokens. Defaults to elements.date.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.

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