# 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'
1

Global usage

Vue.use(DatePicker)
Vue.use(TimeSelect)
1
2

For local usage

export default {
  components: {
    [DatePicker.name]: DatePicker,
    [TimeSelect.name]: TimeSelect
  }
}
1
2
3
4
5
6

# Date picker with shortcuts

TIP

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

<template>
  <fg-input>
  <el-date-picker v-model="datePicker"
                    type="date"
                    placeholder="Pick a day"
                    :picker-options="pickerOptions1">
    </el-date-picker>
</fg-input>
</template>

<script>
  export default {
    data() {
      return {
          pickerOptions1: {
          shortcuts: [{
            text: 'Today',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: 'Yesterday',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: 'A week ago',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        datePicker: ''
       }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# Time picker

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

<script>
  export default {
    data() {
      return {
        timePicker: ''
       }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# DateTime picker

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

<script>
  export default {
    data() {
      return {
        dateTimePicker: ''
       }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

For props, slots & events, please check element ui docs

← Dropdown →