Use editable prop to let the user type a time.
Datetimepicker
An input with a simple dropdown/modal for selecting a date and time, uses native datetimepicker for mobile
<template>
<section>
<b-field grouped group-multiline>
<div class="control">
<b-switch v-model="showWeekNumber">Show week number</b-switch>
</div>
<div class="control">
<b-switch v-model="enableSeconds">Enable seconds</b-switch>
</div>
<b-field label="Locale">
<b-select v-model="locale">
<option :value="undefined"></option>
<option value="de-DE">de-DE</option>
<option value="en-CA">en-CA</option>
<option value="en-GB">en-GB</option>
<option value="en-US">en-US</option>
<option value="es-ES">es-ES</option>
<option value="es-MX">es-MX</option>
<option value="fr-CA">fr-CA</option>
<option value="fr-FR">fr-FR</option>
<option value="it-IT">it-IT</option>
<option value="ja-JP">ja-JP</option>
<option value="pt-BR">pt-BR</option>
<option value="ru-RU">ru-RU</option>
<option value="zn-CN">zn-CN</option>
</b-select>
</b-field>
<b-field label="First day of week">
<b-select v-model="firstDayOfWeek">
<option :value="undefined"></option>
<option :value="0">Sunday</option>
<option :value="1">Monday</option>
<option :value="2">Tuesday</option>
<option :value="3">Wednesday</option>
<option :value="4">Thursday</option>
<option :value="5">Friday</option>
<option :value="6">Saturday</option>
</b-select>
</b-field>
<b-field label="Hour format">
<b-select v-model="hourFormat">
<option :value="undefined"></option>
<option value="12">12</option>
<option value="24">24</option>
</b-select>
</b-field>
</b-field>
<b-field label="Select datetime">
<b-datetimepicker
v-model="selected"
rounded
placeholder="Click to select..."
icon="calendar-today"
:icon-right="selected ? 'close-circle' : ''"
icon-right-clickable
@icon-right-click="clearDateTime"
:locale="locale"
:first-day-of-week="firstDayOfWeek"
:datepicker="{ showWeekNumber }"
:timepicker="{ enableSeconds, hourFormat }"
horizontal-time-picker>
</b-datetimepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
selected: new Date(),
showWeekNumber: false,
enableSeconds: false,
hourFormat: undefined, // Browser locale
locale: undefined, // Browser locale
firstDayOfWeek: undefined // 0 - Sunday
}
},
methods: {
clearDateTime () {
this.selected = null
}
}
}
</script>
# Editable (non readonly)
<template>
<section>
<b-field grouped group-multiline>
<b-field label="Locale">
<b-select v-model="locale">
<option :value="undefined"></option>
<option value="de-DE">de-DE</option>
<option value="en-CA">en-CA</option>
<option value="en-GB">en-GB</option>
<option value="en-US">en-US</option>
<option value="es-ES">es-ES</option>
<option value="es-MX">es-MX</option>
<option value="fr-CA">fr-CA</option>
<option value="fr-FR">fr-FR</option>
<option value="it-IT">it-IT</option>
<option value="ja-JP">ja-JP</option>
<option value="pt-BR">pt-BR</option>
<option value="ru-RU">ru-RU</option>
<option value="zn-CN">zn-CN</option>
</b-select>
</b-field>
</b-field>
Current locale format: {{ sampleFormat }}
<b-field label="Select datetime">
<b-datetimepicker
placeholder="Type or select a date..."
icon="calendar-today"
:locale="locale"
editable>
</b-datetimepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
locale: undefined // Browser locale
}
},
computed: {
sampleFormat() {
const dtf = new Intl.DateTimeFormat(this.locale, {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: this.enableSeconds ? 'numeric' : undefined
})
return dtf.format(new Date(2020, 11, 11, 13, 14, 15))
}
}
}
</script>
# Range
You can limit the date range with min-datetime and max-datetime props.
<template>
<b-field label="Select datetime">
<b-datetimepicker
placeholder="Click to select..."
:min-datetime="minDatetime"
:max-datetime="maxDatetime">
</b-datetimepicker>
</b-field>
</template>
<script>
export default {
data() {
const min = new Date()
min.setDate(min.getDate() - 7)
min.setHours(9)
min.setMinutes(0)
min.setSeconds(0)
const max = new Date()
max.setDate(max.getDate() + 7)
max.setHours(18)
max.setMinutes(0)
max.setSeconds(0)
return {
minDatetime: min,
maxDatetime: max
}
}
}
</script>
You can add a custom the footer to the datetimepicker using left and right slots.
<template>
<b-field label="Select datetime">
<b-datetimepicker v-model="datetime"
placeholder="Click to select...">
<template #left>
<b-button
label="Now"
type="is-primary"
icon-left="clock"
@click="datetime = new Date()" />
</template>
<template #right>
<b-button
label="Clear"
type="is-danger"
icon-left="close"
outlined
@click="datetime = null" />
</template>
</b-datetimepicker>
</b-field>
</template>
<script>
export default {
data() {
return {
datetime: new Date()
}
}
}
</script>
# Inline
Datetimepicker can also be shown inline with the inline prop, input is removed, set a v-model to get the date.
<template>
<b-datetimepicker v-model="datetime" inline></b-datetimepicker>
</template>
<script>
export default {
data() {
return {
datetime: new Date()
}
}
}
</script>
# Granularity
Datetimepicker can be set with a minute or hour ganularity with incrementMinutes or incrementHours.
<template>
<b-field label="Select datetime">
<b-datetimepicker
placeholder="Select a date"
icon="calendar-today"
:timepicker="timepicker"
>
</b-datetimepicker>
</b-field>
</template>
<script>
export default {
data() {
return {
timepicker: {
incrementMinutes: 15,
incrementHours: 2
}
}
},
}
</script># API
Name | Description | Type | Values | Default |
|---|---|---|---|---|
v-model | Binding value | Date | — | — |
datetime-formatter | Function to format datetime (Date type) to a string for displaying in the input | Function | — | (time) => new Intl.DateTimeFormat(locale).format(time) |
datetime-parser | Function to parse string to a datetime (Date type) for setting the component's datetime from the input | Function | — | Tries to parse the time using the locale specific format. Fallback to HH:mm or HH:mm AM/PM |
min-datetime | Earliest datetime available for selection | Date | — | — |
max-datetime | Latest datetime available for selection | Date | — | — |
first-day-of-week | First day of week to display in table header | Number | 0 - 6 (Sunday is 0, Monday is 1, and so on) | 0 |
nearby-month-days | Show/Hide nearby month days (prev and next month) | Boolean | - | true |
size | Vertical size of input and picker, optional | String | is-small, is-medium, is-large | — |
inline | Datimepicker is shown inline, input is removed | Boolean | — | false |
editable | Enable input/typing. Note that you might have to set a custom time parser | Boolean | — | false |
loading | Add the loading state to the input | Boolean | — | false |
icon | Icon name to be added | String | — | — |
icon-right | Icon name to be added on the right side | String | — | — |
icon-right-clickable | Make the right icon clickable | Boolean | — | false |
icon-pack | Icon pack to use | String | mdi, fa, fas, far, fad, fal | mdi |
mobile-native | Enable native datetimepicker on mobile | Boolean | true | |
position | Optional, position of the timepicker relative to the input | String | is-top-right, is-top-left, is-bottom-left | Bottom right |
open-on-focus | Open timepicker on input focus | Boolean | — | false |
datepicker | Any datepicker props | Object | — | — |
timepicker | Any timepicker props | Object | — | — |
focusable | Datetimepicker container can be focused | Boolean | — | true |
horizontal-time-picker | Changes the time picker layout to a horizontal position | Boolean | — | false |
append-to-body | Append datetimepicker calendar to body (prevents event bubbling) | Boolean | — | false |
locale | Accept a string with a BCP 47 language tag, or an array of such strings. See Unicode BCP 47 locale identifier | String, Array of String | — | undefined: default to browser locale. |
| Any native attribute | — | — | — | — |
This page is open source. Noticed a typo or something's unclear?