Buefy — Date Time Pickers

Image for post
Image for post
Photo by Wiktor Karkocha 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.

Date Time Pickers

We can add a date time picker with Buefy.

For example, we can write:

<template>
<div>
<b-field label="Select datetime">
<b-datetimepicker
rounded
placeholder="Click to select..."
:locale="locale"
:datepicker="{ showWeekNumber }"
:timepicker="{ enableSeconds, hourFormat }"
horizontal-time-picker
></b-datetimepicker>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {
showWeekNumber: false,
enableSeconds: false,
hourFormat: "12h",
locale: "en-us"
};
},
methods: {}
};
</script>

to add our date time picker with the b-datetimepicker component.

The datepicker and timepicker props let us set the date and time picker options.

We can make the input editable with the editable prop:

<template>
<div>
<b-field label="Select datetime">
<b-datetimepicker
rounded
placeholder="Click to select..."
:locale="locale"
editable
:datepicker="{ showWeekNumber }"
:timepicker="{ enableSeconds, hourFormat }"
horizontal-time-picker
></b-datetimepicker>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {
showWeekNumber: false,
enableSeconds: false,
hourFormat: "12h",
locale: "en-us"
};
},
methods: {}
};
</script>

We can change the min-datetime and max-datetime props to restrict the range we can select:

<template>
<div>
<b-field label="Select datetime">
<b-datetimepicker
placeholder="Click to select..."
:min-datetime="minDatetime"
:max-datetime="maxDatetime"
></b-datetimepicker>
</b-field>
</div>
</template>
<script>
export default {
data() {
const min = new Date();
min.setDate(min.getDate() - 14);
min.setHours(9);
min.setMinutes(0);
min.setSeconds(0);
const max = new Date();
max.setDate(max.getDate() + 14);
max.setHours(18);
max.setMinutes(0);
max.setSeconds(0);
return {
minDatetime: min,
maxDatetime: max
};
},
methods: {}
};
</script>

We set the minDatetime and maxDatetime with the Date instances we want to restrict the selected date to be between the given values.

We can populate the left and right slots with the footer with the items we want.

For example, we can write:

<template>
<div>
<b-field label="Select datetime">
<b-datetimepicker v-model="datetime" placeholder="Click to select...">
<template slot="left">
<button class="button is-primary" @click="datetime = new Date()">
<span>Now</span>
</button>
</template>
<template slot="right">
<button class="button is-danger" @click="datetime = null">
<span>Clear</span>
</button>
</template>
</b-datetimepicker>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {
datetime: undefined
};
},
methods: {}
};
</script>

We added buttons to the left and right of the time picker by populating the slots.

Also, we can add the inline prop to make the date time picker inline:

<template>
<div>
<b-field label="Select datetime">
<b-datetimepicker inline v-model="datetime" placeholder="Click to select..."></b-datetimepicker>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {
datetime: undefined
};
},
methods: {}
};
</script>

Conclusion

We can add date-time pickers with Buefy.

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