Vue Date Picker

# Examples

# Calendar widget

Vue Date Picker can be used in calendar widget form.

MonTueWedThuFriSatSun
28
29
30
31
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
1
2
3
Show code 
<template>
  <vue-date-picker
    v-model="date"
    :hasInputElement="false"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: '2019-02-12'
  })
};
</script>

# Date format

Simple date picker with empty value:

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :format="'YYYY.MM.DD'"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: undefined
  })
};
</script>

Simple date picker with custom format (default is 'YYYY-MM-DD'):

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :format="'YYYY.MM.DD'"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: '2019.01.01'
  })
};
</script>

# Display format

Use display format prop when UI date format is different from raw data format.

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :displayFormat="'DD.MM.YYYY'"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: '2019-01-01'
  })
};
</script>

# Custom date parser

Vue Date Picker comes with simple date parser. If you need to work with complex date formats feel free to inject implementation of your choice.

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :format="format"
    :parseDate="parseDate"
    :formatDate="formatDate"
    :inputAttributes="{size: 32}"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';
import fecha from 'fecha';

export default {
  components: { VueDatePicker },
  data: () => ({
    format: 'dddd MMMM Do, YYYY',
    date: fecha.format(new Date(), 'dddd MMMM Do, YYYY')
  }),
  methods: {
    parseDate(dateString, format) {
      return fecha.parse(dateString, format);
    },
    formatDate(dateObj, format) {
      return fecha.format(dateObj, format);
    }
  }
};
</script>

# Date time picker

Date picker with controls for hours and minutes:

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :pickTime="true"
    :format="'YYYY-MM-DD HH:mm'"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: '2019-01-01 14:30'
  })
};
</script>

# Date time picker (AM/PM)

Date time picker with hours displayed using 12 hour clock:

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :pickTime="true"
    :use12HourClock="true"
    :format="'YYYY-MM-DD HH:mm'"
    :displayFormat="'YYYY.MM.DD H:mm A'"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: '2019-01-01 14:30'
  })
};
</script>

# Custom start period

Open calendar UI with custom start month / year period:

Show code 
<template>
  <vue-date-picker
    :startPeriod="{ month: 0, year: 2020 } }"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: {VueDatePicker}
};
</script>

# Custom content with slot

Replace default input controls with custom slot content:

Show code 
<template>
  <vue-date-picker v-model="date">
    <template v-slot:default="{toggle, inputValue}">
      <button @click="toggle">
        {{ inputValue || 'Toggle calendar' }}
      </button>
    </template>
  </vue-date-picker>
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: ''
  })
};
</script>

# Disabling dates

Set "isDateDisabled" function as component prop to disable dates:

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :isDateDisabled="isFutureDate"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: ''
  }),
  methods: {
    isFutureDate(date) {
      const currentDate = new Date();
      return date > currentDate;
    }
  }
};
</script>

# Disabling manual input

Manual user input can be disabled by setting input readonly attribute via "inputAttributes" prop.

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :inputAttributes="{readonly: true}"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: '2018-12-29'
  })
};
</script>

# Disable editing and picker UI

Disable input editing and calendar UI by setting "editable" prop to false.

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :editable="false"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: '2018-12-29'
  })
};
</script>

# Start week on Sunday

Sunday can be set as the first day of the week via "startWeekOnSunday" prop.

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :startWeekOnSunday="true"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: '2019-01-01'
  })
};
</script>

# Change selectable years

Dropdown for selecteble years can be customized via selectableYearRange prop (default value is 40 years from and after current year).

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :selectableYearRange="{from: 2015, to: 2020}"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: '2019-01-01'
  })
};
</script>

# Disable invalid months

You can disable invalid months on selecting via prop disableInvalidMonths (default value is false)

Show code 
<template>
  <vue-date-picker
    v-model="date"
    :disableInvalidMonths="true"
  />
</template>

<script>
import VueDatePicker from '@therunninghub/vue-date-picker';

export default {
  components: { VueDatePicker },
  data: () => ({
    date: '2019-01-31'
  })
};
</script>

← Localization →