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
asenable-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>
enable-minutes
Enable minutes in the time picker
- Type:
boolean
- Default:
true
Code Example
<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
<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 }[]
- Single picker:
- 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
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
<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>