# Date Pickers

We have created a date 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} from 'element-ui'
1

Global usage

Vue.use(DatePicker)
1

For local usage

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

# 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

# Now UI styled date picker

<template>
  <fg-input>
  <el-date-picker v-model="datePicker"
                   popper-class="date-picker-primary"
                    type="date"
                    placeholder="Select date">
    </el-date-picker>
</fg-input>
</template>

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

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

← Dropdown →