Buefy — Time Picker and File Input

Image for post
Image for post
Photo by Kaylah Matthews 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

Buefy has a time picker component.

We can add the b-timepicker component to use it.

For example, we can write;

<template>
<section>
<b-field>
<b-timepicker
rounded
placeholder="Click to select..."
enable-seconds
hour-format="12"
locale="en"
></b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {};
}
};
</script>

The component takes a few props.

rounded makes the input box have round corners.

placeholder has the placeholder.

enable-seconds has a dropdown to pick the seconds.

hour-format sets the hour format.

locale sets the locale.

We can make the time picker editable with the editable prop:

<template>
<section>
<b-field>
<b-timepicker
rounded
placeholder="Click to select..."
enable-seconds
hour-format="12"
locale="en"
editable
></b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {};
}
};
</script>

The range of allowed values can be set with the min-time and max-time props:

<template>
<section>
<b-field>
<b-timepicker placeholder="Click to select..." :min-time="minTime" :max-time="maxTime"></b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
const min = new Date();
min.setHours(0);
min.setMinutes(0);
const max = new Date();
max.setHours(2);
max.setMinutes(0);
return {
minTime: min,
maxTime: max
};
}
};
</script>

The footer can be changed by populating the default slot:

<template>
<section>
<b-field>
<b-timepicker v-model="time" placeholder="Click to select...">
<button class="button is-primary" @click="time = new Date()">
<span>Now</span>
</button>

<button class="button is-danger" @click="time = null">
<span>Clear</span>
</button>
</b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
time: new Date()
};
}
};
</script>

We added 2 buttons into the default slot and they’ll be displayed below the time picker.

Also, we can make it inline with the inline prop:

<template>
<section>
<b-field>
<b-timepicker v-model="time" inline></b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
time: new Date()
};
}
};
</script>

The increments of the dropdown can be set with the incrementMinutes and incrementHours props:

<template>
<section>
<b-field>
<b-timepicker v-model="time" :incrementMinutes="5" :incrementHours="2"></b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
time: new Date()
};
}
};
</script>

File Upload Input

The b-upload component is the file upload input.

For example, we can write:

<template>
<b-field class="file is-primary" :class="{'has-name': !!file}">
<b-upload v-model="file">
<span class="file-cta">
<span>Click to upload</span>
</span>
<span class="file-name" v-if="file">{{ file.name }}</span>
</b-upload>
</b-field>
</template>
<script>
export default {
data() {
return {
file: null
};
}
};
</script>

to add it.

The file-cta class makes the input display as a button.

v-model binds the selected file to the file state.

We can make the file input appears as a drop zone with the drag-drop prop:

<template>
<b-field class="file is-primary" :class="{'has-name': !!file}">
<b-upload v-model="file" drag-drop>
<section class="section">
<div class="content has-text-centered">
<p>Drop your files here or click to upload</p>
</div>
</section>
</b-upload>
</b-field>
</template>
<script>
export default {
data() {
return {
file: null
};
}
};
</script>

The expanded prop makes the button longer:

<template>
<b-field class="file">
<b-upload v-model="file" expanded>
<a class="button is-primary is-fullwidth">
<span>{{ file && file.name || "Click to upload"}}</span>
</a>
</b-upload>
</b-field>
</template>
<script>
export default {
data() {
return {
file: null
};
}
};
</script>

Conclusion

We can add a time picker and file upload input 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