Buefy — Time Picker and File Input

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…