# Date & Time Pickers

We have created a date-time picker starting from the element-ui date picker. We have changed the colours, typography and buttons, so it can look like the rest of the dashboard.

Please check out date-picker docs for detailed info as well as ExtendedForms.vue page to see some examples. Below is a very simple example

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>
  </base-input>
</template>

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

# 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>
Show Code

# 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>
Show Code

← Charts →