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

<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

<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

<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

<template>
    <VueDatePicker v-model="date" enable-seconds />
</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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

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

• Type: boolean
• Default: false

Code Example

<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

<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>