Time picker configuration

Configuration properties for the time picker, applicable whether it is used standalone or with the datepicker.

Info

When checking the examples, for boolean prop types, the example will show the behavior opposite of what is set for the default value
If you use the component in the browser <script> tag, make sure to pass multi-word props with -, for example, enableTimePicker as enable-time-picker and so on

time-picker-inline

Configures the time picker to display under the calendar rather than opening it as an overlay.

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" time-picker-inline />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

enable-time-picker

Enable or disable time picker

Type: boolean
Default: true

Code Example

vue

<template>
    <VueDatePicker v-model="date" :enable-time-picker="false" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

is-24

Whether to use 24H or 12H mode

Type: boolean
Default: true

Code Example

vue

<template>
    <VueDatePicker v-model="date" :is-24="false" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

enable-seconds

Enable seconds in the time picker

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" enable-seconds />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

enable-minutes

Enable minutes in the time picker

Type: boolean
Default: true

Code Example

vue

<template>
    <VueDatePicker v-model="date" :enable-minutes="false" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

hours-increment

The value which is used to increment hours via arrows in the time picker

Type: number | string
Default: 1

Code Example

vue

<template>
    <VueDatePicker v-model="date" hours-increment="2" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

minutes-increment

The value which is used to increment minutes via arrows in the time picker

Type: number | string
Default: 1

Code Example

vue

<template>
    <VueDatePicker v-model="date" minutes-increment="5" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

seconds-increment

The value which is used to increment seconds via arrows in the time picker

Type: number | string
Default: 1

Code Example

vue

<template>
    <VueDatePicker v-model="date" enable-seconds seconds-increment="5" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

hours-grid-increment

The value which is used to increment hours when showing hours overlay

It will always start from 0 until it reaches 24 or 12 depending on the is-24 prop

Type: number | string
Default: 1

Code Example

vue

<template>
    <VueDatePicker v-model="date" hours-grid-increment="2" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

minutes-grid-increment

The value which is used to increment minutes when showing minutes overlay

It will always start from 0 to 60 minutes

Type: number | string
Default: 5

Code Example

vue

<template>
    <VueDatePicker v-model="date" minutes-grid-increment="2" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

seconds-grid-increment

The value which is used to increment seconds when showing seconds overlay

Type: number | string
Default: 5

Code Example

vue

<template>
    <VueDatePicker v-model="date" enable-seconds seconds-grid-increment="2" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

no-hours-overlay

Disable overlay for the hours, only arrow selection will be available

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" no-hours-overlay />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

no-minutes-overlay

Disable overlay for the minutes, only arrow selection will be available

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" no-minutes-overlay />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

no-seconds-overlay

Disable overlay for the seconds, only arrow selection will be available

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" no-seconds-overlay enable-seconds />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

min-time

Sets the minimal available time to pick

Type: { hours?: number | string; minutes?: number | string; seconds?: number | string }
Default: null

Code Example

vue

<template>
    <VueDatePicker v-model="date" :min-time="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

max-time

Sets the maximal available time to pick

Type: { hours?: number | string; minutes?: number | string; seconds?: number | string }
Default: null

Code Example

vue

<template>
    <VueDatePicker v-model="date" :max-time="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

start-time

Set some default starting time

Type:
- Single picker: { hours?: number | string; minutes?: number | string; seconds?: number | string }
- Range picker: { hours?: number | string; minutes?: number | string; seconds?: number | string }[]
Default: null

Code Example

vue

<template>
    <VueDatePicker v-model="date" :start-time="startTime" placeholder="Select Date" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref();
const startTime = ref({ hours: 0, minutes: 0 });
</script>

disable-time-range-validation

Deprecation warning

This prop is deprecated, please refer to range configuration section

Explicitly allow end time in range mode to be before the start time

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="time" time-picker disable-time-range-validation range placeholder="Select Time" />
</template>

<script setup>
import { ref } from 'vue';

const time = ref();
</script>

disabled-times

Disable specific times in the time-picker

Type:

type TimeObj = { hours: number; minutes: number; seconds?: number };

type FnParam = TimeObj | TimeObj[] | (TimeObj | undefined)[];

type DisabledTimesProp = ((time: FnParam) => boolean) 
        | TimeObj[]
        | [TimeObj[], TimeObj[]] // only for range validation

Default: undefined

Info

Dynamic disabling of times in the time-picker overlay only works with the Array value provided

Prop can be used either in time-picker or regular date picker modes

To disable full hour you can pass an object for example: { hours: 15, minutes: "*" } with the * wildcard

To have a better control of the renge validation, you can provide an array containing 2 arrays.

First array will be used to validate start time
Second array will be used to validate end time

Code Example

vue

<template>
    <button v-for="btn in buttons" :key="btn" @click="changeMode(btn)">
      {{ btn }}
    </button>
    <VueDatePicker v-model="date" :disabled-times="isRange ? rangeDisabledTimes : disabledTimes" />
</template>

<script setup>
import { ref, computed } from 'vue';

const date = ref(new Date());

const buttons = ['single', 'range'];
const mode = ref('single');

const isRange = computed(() => mode.value === 'range');

const disabledTimes = [
  { hours: 15, minutes: '*' }, // disable full hour
  { hours: 16, minutes: 15 },
  { hours: 16, minutes: 20 },
  { hours: 17, minutes: 30 },
];

// This is not mandatory, you can still use disabledTimes one level array in range mode
// Used for demo purposes, where 2 sets of times are given for each date
const rangeDisabledTimes = [
  [
    { hours: 12, minutes: '*' },
    { hours: 9, minutes: 10 },
  ],
  disabledTimes,
];

const changeMode = (btn) => {
  value.value = null;
  mode.value = btn;
};
</script>

Time picker configuration ​

time-picker-inline ​

enable-time-picker ​

is-24 ​

enable-seconds ​

enable-minutes ​

hours-increment ​

minutes-increment ​

seconds-increment ​

hours-grid-increment ​

minutes-grid-increment ​

seconds-grid-increment ​

no-hours-overlay ​

no-minutes-overlay ​

no-seconds-overlay ​

min-time ​

max-time ​

start-time ​

disable-time-range-validation ​

disabled-times ​

Time picker configuration

time-picker-inline

enable-time-picker

is-24

enable-seconds

enable-minutes

hours-increment

minutes-increment

seconds-increment

hours-grid-increment

minutes-grid-increment

seconds-grid-increment

no-hours-overlay

no-minutes-overlay

no-seconds-overlay

min-time

max-time

start-time

disable-time-range-validation

disabled-times