Buefy — Time and Date Pickers

Image for post
Image for post
Photo by Brienne Hong on Unsplash

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store