Vue Datepicker

Appearance

Return to top
On this page

Time picker configuration

Props to configure time picker, whether using it only as time picker or alongside 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

enable-time-picker

Enable or disable time picker

  • Type: boolean
  • Default: true
Code Example
vue
<template>
    <Datepicker v-model="date" :enable-time-picker="false" />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

is-24

Whether to use 24H or 12H mode

  • Type: boolean
  • Default: true
Code Example
vue
<template>
    <Datepicker v-model="date" :is-24="false" />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

enable-seconds

Enable seconds in the time picker

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" enable-seconds />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            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>
    <Datepicker v-model="date" hours-increment="2" />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            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>
    <Datepicker v-model="date" minutes-increment="5" />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            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>
    <Datepicker v-model="date" enable-seconds seconds-increment="5" />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            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>
    <Datepicker v-model="date" hours-grid-increment="2" />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            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>
    <Datepicker v-model="date" minutes-grid-increment="2" />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            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>
    <Datepicker v-model="date" enable-seconds seconds-grid-increment="2" />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

no-hours-overlay

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

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" no-hours-overlay />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

no-minutes-overlay

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

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" no-minutes-overlay />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

no-seconds-overlay

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

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" no-seconds-overlay enable-seconds />
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            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>
    <Datepicker v-model="date" :min-time="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
</template>

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

export default {
    setup() {
        const date = ref();
        
        return {
            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>
    <Datepicker v-model="date" :max-time="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
</template>

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

export default {
    setup() {
        const date = ref();
        
        return {
            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>
    <Datepicker v-model="date" :start-time="startTime" placeholder="Select Date" />
</template>

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

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

disable-time-range-validation

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

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="time" time-picker disable-time-range-validation range placeholder="Select Time" />
</template>

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

export default {
    setup() {
        const time = ref();
        
        return {
            time,
        }
    }
}
</script>

Released under the MIT License.

Copyright © 2021-present Vuepic