Buefy — Date Time Pickers

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 }"…