Buefy is a UI framework that’s based on Bulma.
In this article, we’ll look at how to use Buefy in our Vue app.
Time Picker Color
We can change the time picker’s color with the type prop.
For example, we can write:
<template>
<section>
<b-field label="Select time">
<b-clockpicker v-model="time" placeholder="Select time" type="is-info" inline></b-clockpicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
time: undefined
};
}
};
</script>
We have the type prop to set the color of the time picker.
inline makes the time picker display inline.
Other values for type include is-primary , is-success , is-warning , is-danger , is-white , is-black , is-light , and is-dark .
Datepicker
Buefy comes with a datepicker component.
To use it, we can write:
<template>
<section>
<b-field label="Select a date">
<b-datepicker
v-model="selected"
show-week-number
locale="en-ca"
placeholder="Select date"
trap-focus
></b-datepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
selected: undefined
};
}
};
</script>
We have the b-datepicker component with the show-week-number prop to show the week number.
locale changes the locale of the calendar.
placeholder is shown as the placeholder of the input.
trap-focus sets the focus on the input.
Editable Datepicker
We can make the datepicker editable with editable prop.
For example, we can write:
<template>
<section>
<b-field label="Select a date">
<b-datepicker v-model="selected" editable placeholder="Select date" trap-focus></b-datepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
selected: undefined
};
}
};
</script>
We can enter the value in MM/DD/YYYY format to set the date value.
Footer
We can add content to the default slot to populate the footer.
For example, we can write:
<template>
<section>
<b-field label="Select a date">
<b-datepicker v-model="date" :first-day-of-week="1" placeholder="Select date">
<button class="button is-primary" @click="date = new Date()">
<span>Today</span>
</button>
<button class="button is-danger" @click="date = null">
<span>Clear</span>
</button>
</b-datepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
date: new Date()
};
}
};
</script>
We put our buttons between the b-datepicker tags and they’ll show below the date picker.
Header
Also, we can add items in the header slot to show in the header.
For example, we can write:
<template>
<section>
<b-field label="Select a date">
<b-datepicker v-model="date" :first-day-of-week="1" placeholder="Select date">
<template slot="header">
<button class="button is-primary" @click="date = new Date()">
<span>Today</span>
</button>
<button class="button is-danger" @click="date = null">
<span>Clear</span>
</button>
</template>
</b-datepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
date: new Date()
};
}
};
</script>
We populate the header slot with the buttons to make them show above the datepicker.
Datepicker Trigger
We can add our own date picker trigger by populating the trigger slot:
<template>
<section>
<b-datepicker v-model="date" :first-day-of-week="1" placeholder="Select date">
<template v-slot:trigger>
<b-button type="is-primary">Pick date</b-button>
</template>
</b-datepicker>
</section>
</template>
<script>
export default {
data() {
return {
date: new Date()
};
}
};
</script>
When we click on the button, we’ll see the date picker.
Conclusion
We can add date and time pickers with Buefy to our Vue app.
