Nuxt Datepicker

The Nuxt datepicker is tied to a standard form input field. In order the Nuxt datepicker to work, focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.
Keep reading our Nuxt Datepicker examples and learn how to use this plugin.

Initialization

import {DatePicker, TimeSelect} from 'element-ui'

Global usage

Vue.use(DatePicker)
Vue.use(TimeSelect)

For local usage

export default {
  components: {
    [DatePicker.name]: DatePicker,
    [TimeSelect.name]: TimeSelect
  }
}

Date picker

Wrap the date-picker in a base-input component in order to have an input similar to the ones in the dashboard

<template>
  <base-input>
    <el-date-picker v-model="datePicker"
                    type="date"
                    placeholder="Pick a day">
      </el-date-picker>
</template>

<script>
  export default {
    data() {
      return {
        datePicker: ''
       }
    }
  }
</script>

Time picker

<template>
  <base-input>
    <el-time-select
        v-model="timePicker"
        :picker-options="{
          start: '00:00',
          step: '00:15',
          end: '23:59'
        }"
        placeholder="Select time">
      </el-time-select>
  </base-input>
</template>

<script>
  export default {
    data() {
      return {
        timePicker: ''
       }
    }
  }
</script>

DateTime picker

<template>
  <base-input>
  <el-date-picker v-model="dateTimePicker"
                    type="datetime"
                    placeholder="Select date and time">
    </el-date-picker>
</base-input>
</template>

<script>
  export default {
    data() {
      return {
        dateTimePicker: ''
       }
    }
  }
</script>

Please check them out here.