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.
