Specialized input components for date, time, and datetime selection with internationalization and mobile support.
Date selection component with calendar interface and various display modes.
export const BDatepicker: Component<{
modelValue?: Date | Date[];
dayNames?: string[];
monthNames?: string[];
firstDayOfWeek?: number;
inline?: boolean;
openOnFocus?: boolean;
type?: 'month';
dateFormatter?: (date: Date) => string;
dateParser?: (dateString: string) => Date;
dateCreator?: () => Date;
mobileNative?: boolean;
position?: 'is-top-right' | 'is-top-left' | 'is-bottom-left';
iconRight?: string;
iconRightClickable?: boolean;
iconPack?: string;
size?: 'is-small' | 'is-medium' | 'is-large';
placeholder?: string;
editable?: boolean;
disabled?: boolean;
readonly?: boolean;
loading?: boolean;
expanded?: boolean;
closeOnClick?: boolean;
range?: boolean;
multiple?: boolean;
rulesForFirstWeek?: number;
minDate?: Date;
maxDate?: Date;
focusedDate?: Date;
selectableDates?: Date[] | ((date: Date) => boolean);
unselectableDates?: Date[] | ((date: Date) => boolean);
unselectableDaysOfWeek?: number[];
showWeekNumber?: boolean;
weekNumberClickable?: boolean;
mobileModal?: boolean;
appendToBody?: boolean;
ariaNextLabel?: string;
ariaPreviousLabel?: string;
trapFocus?: boolean;
autoFocus?: boolean;
nearbyMonthDays?: boolean;
nearbySelectableMonthDays?: boolean;
showNearbyMonthDays?: boolean;
indicators?: string;
yearsRange?: number[];
resetOnMeridianChange?: boolean;
}>;Usage example:
import { BDatepicker } from "buefy";
// Basic datepicker
<BDatepicker
v-model="selectedDate"
placeholder="Select date"
:icon-right="calendar"
/>
// Date range picker
<BDatepicker
v-model="dateRange"
:range="true"
placeholder="Select date range"
/>
// Inline calendar
<BDatepicker
v-model="selectedDate"
:inline="true"
:show-week-number="true"
/>
// With restrictions
<BDatepicker
v-model="selectedDate"
:min-date="minDate"
:max-date="maxDate"
:unselectable-days-of-week="[0, 6]"
/>Time selection component with hour, minute, and optional second inputs.
export const BTimepicker: Component<{
modelValue?: Date;
inline?: boolean;
openOnFocus?: boolean;
timeFormatter?: (date: Date) => string;
timeParser?: (timeString: string) => Date;
mobileNative?: boolean;
position?: 'is-top-right' | 'is-top-left' | 'is-bottom-left';
iconRight?: string;
iconRightClickable?: boolean;
iconPack?: string;
size?: 'is-small' | 'is-medium' | 'is-large';
placeholder?: string;
editable?: boolean;
disabled?: boolean;
readonly?: boolean;
loading?: boolean;
expanded?: boolean;
hourFormat?: '12' | '24';
incrementHours?: number;
incrementMinutes?: number;
incrementSeconds?: number;
minTime?: Date;
maxTime?: Date;
enableSeconds?: boolean;
hoursLabel?: string;
minutesLabel?: string;
secondsLabel?: string;
timeCreator?: (defaultTime: Date) => Date;
appendToBody?: boolean;
resetOnMeridianChange?: boolean;
unselectableTimes?: Date[] | ((date: Date) => boolean);
}>;Usage example:
import { BTimepicker } from "buefy";
// Basic timepicker
<BTimepicker
v-model="selectedTime"
placeholder="Select time"
icon-right="clock"
/>
// 12-hour format with seconds
<BTimepicker
v-model="selectedTime"
hour-format="12"
:enable-seconds="true"
hours-label="hr"
minutes-label="min"
seconds-label="sec"
/>
// Inline time selector
<BTimepicker
v-model="selectedTime"
:inline="true"
:increment-minutes="15"
/>Combined date and time selection component.
export const BDatetimepicker: Component<{
modelValue?: Date;
editable?: boolean;
placeholder?: string;
disabled?: boolean;
size?: 'is-small' | 'is-medium' | 'is-large';
iconRight?: string;
iconRightClickable?: boolean;
iconPack?: string;
openOnFocus?: boolean;
position?: 'is-top-right' | 'is-top-left' | 'is-bottom-left';
mobileNative?: boolean;
minDatetime?: Date;
maxDatetime?: Date;
datetimeFormatter?: (date: Date) => string;
datetimeParser?: (dateString: string) => Date;
datetimeCreator?: (defaultDatetime: Date) => Date;
datepicker?: object;
timepicker?: object;
appendToBody?: boolean;
}>;Usage example:
import { BDatetimepicker } from "buefy";
// Basic datetime picker
<BDatetimepicker
v-model="selectedDatetime"
placeholder="Select date and time"
/>
// With custom formatting
<BDatetimepicker
v-model="selectedDatetime"
:datetime-formatter="formatDateTime"
:datetime-parser="parseDateTime"
/>
// With separate datepicker and timepicker options
<BDatetimepicker
v-model="selectedDatetime"
:datepicker="{
showWeekNumber: true,
firstDayOfWeek: 1
}"
:timepicker="{
enableSeconds: true,
hourFormat: '24'
}"
/>Visual clock interface for time selection.
export const BClockpicker: Component<{
modelValue?: Date;
locale?: string | string[];
inline?: boolean;
openOnFocus?: boolean;
position?: 'is-top-right' | 'is-top-left' | 'is-bottom-left';
mobileNative?: boolean;
iconRight?: string;
iconRightClickable?: boolean;
iconPack?: string;
size?: 'is-small' | 'is-medium' | 'is-large';
placeholder?: string;
editable?: boolean;
disabled?: boolean;
readonly?: boolean;
loading?: boolean;
expanded?: boolean;
hourFormat?: '12' | '24';
incrementMinutes?: number;
autoSwitch?: boolean;
type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' |
'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
hoursLabel?: string;
minutesLabel?: string;
timeCreator?: (defaultTime: Date) => Date;
appendToBody?: boolean;
resetOnMeridianChange?: boolean;
unselectableTimes?: Date[] | ((date: Date) => boolean);
}>;Usage example:
import { BClockpicker } from "buefy";
// Basic clockpicker
<BClockpicker
v-model="selectedTime"
placeholder="Select time"
/>
// Inline clock
<BClockpicker
v-model="selectedTime"
:inline="true"
type="is-primary"
:auto-switch="false"
/>
// 12-hour format
<BClockpicker
v-model="selectedTime"
hour-format="12"
hours-label="Hour"
minutes-label="Minute"
/>Date and time components support full internationalization:
// Configure global date/time formatting
app.use(Buefy, {
defaultDateFormatter: (date) => {
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
},
defaultDateParser: (dateString) => {
return new Date(dateString);
},
defaultTimeFormatter: (date) => {
return date.toLocaleTimeString('en-US', {
hour: '2-digit',
minute: '2-digit'
});
},
defaultTimeParser: (timeString) => {
const [hours, minutes] = timeString.split(':');
const date = new Date();
date.setHours(parseInt(hours), parseInt(minutes), 0, 0);
return date;
}
});
// Custom day and month names
<BDatepicker
v-model="date"
:day-names="['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb']"
:month-names="[
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
]"
:first-day-of-week="1"
/>All datetime components provide native mobile interfaces:
// Enable native mobile date/time inputs
<BDatepicker
v-model="date"
:mobile-native="true"
/>
<BTimepicker
v-model="time"
:mobile-native="true"
/>
<BDatetimepicker
v-model="datetime"
:mobile-native="true"
/>Date and time components work with form validation:
// With validation
<BField
label="Event Date"
:type="errors.date ? 'is-danger' : ''"
:message="errors.date"
>
<BDatepicker
v-model="eventDate"
:min-date="new Date()"
placeholder="Select event date"
@input="validateDate"
/>
</BField>