@domi7891/vuejs-datetime-picker v0.4.2

A date and time picker Vue component.

Support

• Install
• Usage
• Properties
• Events
• Formats

Install

npm install @domi7891/vuejs-datetime-picker

import {
  Datetimepicker,
  Datepicker,
  Timepicker,
} from '@domi7891/vuejs-datetime-picker'

export default {
  // ...
  components: {
    Datetimepicker,
    Datepicker,
    Timepicker,
    //...
  },
  //...
}

Usage

<datetimepicker></datetimepicker>
<!-- or -->
<datepicker></datepicker>
<!-- or -->
<timepicker></timepicker>

Pass a start value as value. Preferred a Date object Supported String formats:

• DateTime: MM/dd/yyyy HH:mm, MM.dd.yyyy HH:mm, MM-dd-yyyy HH:mm
• Date: MM/dd/yyyy, MM.dd.yyyy, MM-dd-yyyy
• Time: HH:mm

<script>
  var date = new Date()
</script>
<datetimepicker :value="date"></datetimepicker>
<!-- or string May 2, 2020 -->
<datetimepicker :value="05/02/2020"></datetimepicker>

Events

<datetimepicker
  v-on:selected="doWhenDateSelected"
  v-on:cleared="doWhenDateCleared"
></datetimepicker>

Properties

Events

Formats

Function as formatter

A Function can be provided as format value. The values will be passed to the function and returns. A string value has to be the return value of the function.

Example

<script>
  //..
  methods: {
    //..
    formatterFunction(date){
      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`

    }
  }
</script>
<datepicker :format="formatterFunction"></datepicker>

String format