Category: BootstrapVue

To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to customize the BootstrapVue date picker.

Dropdown Placement

We can change the drop-down placement with the right , dropup , dropright , dropleft , no-flip and offset props. They change the date picker placement.

no-flip doesn’t move the date picker even if it’s cut off.

offet lets us shift the date picker position.

The rest let us change the direction.

Dark Mode

We can set the dark prop to true to enable dark mode.

For instance, we can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" dark></b-form-datepicker>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: undefined
    };
  }
};
</script>

to make the date picker’s background black.

Button Only Mode

By default, the date picker is shown when we click on the input box. And the input box is shown by default.

To only show the date picker when we click the calendar icon, we can use the button-only prop. This will also remove the input box.

So, we can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" button-only></b-form-datepicker>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: undefined
    };
  }
};
</script>

Then only the calendar icon is shown.

And we can click on it to see the date picker.

Date String Format

We can change the date string format of the date picker.

For instance, we can write:

<template>
  <div id="app">
    <b-form-datepicker
      v-model="value"
      :date-format-options="{ year: 'numeric', month: 'short', day: '2-digit', weekday: 'short' }"
    ></b-form-datepicker>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: undefined
    };
  }
};
</script>

We added the date-format-options prop.

The object we pass in has the year , month , day , and weekday props to set the selected date format.

'numeric' means it’s a number.

'short' means we show the abbreviation.

'2-digit' means we show 2 digits.

Therefore, we should see that the selected date has the full year, abbreviated month and weekday, and the day number.

Full-Width Calendar Dropdown

We can adjust the calendar dropdown width with the calendar-width and the menu-class prop.

For instance, we can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" menu-class="w-100" calendar-width="100%"></b-form-datepicker>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: undefined
    };
  }
};
</script>

menu-class is 'w-100' , which makes the date picker fills the width of the screen.

calendar-width is '100%' so that the content fills the box.

Internationalization

We can change the locale of the date picker.

For instance, we can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" :locale="locale"></b-form-datepicker>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: undefined,
      locale: 'de'
    };
  }
};
</script>

We have the locale field set to 'de' to set the date picker to the Germany locale.

Now we’ll see the weekdays and months are displayed in German.

We can also add the labels to change the rest of the text.

For instance, we can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" v-bind="labels.de" :locale="locale"></b-form-datepicker>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: undefined,
      locale: "de",
      labels: {
        de: {
          labelPrevDecade: "Vorheriges Jahrzehnt",
          labelPrevYear: "Vorheriges Jahr",
          labelPrevMonth: "Vorheriger Monat",
          labelCurrentMonth: "Aktueller Monat",
          labelNextMonth: "Nächster Monat",
          labelNextYear: "Nächstes Jahr",
          labelNextDecade: "Nächstes Jahrzehnt",
          labelToday: "Heute",
          labelSelected: "Ausgewähltes Datum",
          labelNoDateSelected: "Kein Datum gewählt",
          labelCalendar: "Kalender",
          labelNav: "Kalendernavigation",
          labelHelp: "Mit den Pfeiltasten durch den Kalender navigieren"
        }
      }
    };
  }
};
</script>

Now the rest of the labels are in German.

This includes all the navigation labels and instructions.

Likewise, we can add the weekday field to change the starting week daty.

weekdays to add labels for weekdays.

showDecadeNav toggles on or off the decade navigation.

hideHeader hide header hides the header if it’s true .

We can set them as follows:

<template>
  <div id="app">
    <b-form-datepicker
      :start-weekday="weekday"
      :show-decade-nav="showDecadeNav"
      :hide-header="hideHeader"
      v-model="value"
      v-bind="labels.de"
      :locale="locale"
    ></b-form-datepicker>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: undefined,
      locale: "de",
      labels: {
        de: {
          labelPrevDecade: "Vorheriges Jahrzehnt",
          labelPrevYear: "Vorheriges Jahr",
          labelPrevMonth: "Vorheriger Monat",
          labelCurrentMonth: "Aktueller Monat",
          labelNextMonth: "Nächster Monat",
          labelNextYear: "Nächstes Jahr",
          labelNextDecade: "Nächstes Jahrzehnt",
          labelToday: "Heute",
          labelSelected: "Ausgewähltes Datum",
          labelNoDateSelected: "Kein Datum gewählt",
          labelCalendar: "Kalender",
          labelNav: "Kalendernavigation",
          labelHelp: "Mit den Pfeiltasten durch den Kalender navigieren"
        }
      },
      showDecadeNav: false,
      hideHeader: false,
      weekday: 0,
      weekdays: [
        { value: 0, text: "Sunday" },
        { value: 1, text: "Monday" },
        { value: 6, text: "Saturday" }
      ]
    };
  }
};
</script>

We added a few props to set them.

Conclusion

There are many customization options with the date picker.

We can change the locales and labels as we wish.

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to customize star rating inputs.

Number of Stars

By default, the b-form-rating displays 5 stars.

We can change the number if starts to display with the stars prop.

For instance, we can write:

<template>
  <div id="app">
    <b-form-rating v-model="value" stars="8"></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: 6
    };
  }
};
</script>

We set stars to 8, so we see 8 stars.

Show Stars Value

The show-value prop lets us show the value of the stars.

For example, we can write:

<template>
  <div id="app">
    <b-form-rating v-model="value" show-value></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: 0
    };
  }
};
</script>

Then when we click the stars, we see how many stars we set.

Precision

The stars don’ have to always increment by 1.

We can change the precision by using the show-value-precision prop.

For instance, we can write:

<template>
  <div id="app">
    <b-form-rating v-model="value" readonly show-value precision="2"></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: 3.5
    };
  }
};
</script>

Then we can display star value to 2 decimal places.

However, we can’t select a part of a star.

Show Maximum Value

We can use the show-value-max prop to show the maximum value of the stars.

For instance, we can write:

<template>
  <div id="app">
    <b-form-rating v-model="value" readonly show-value show-value-max precision="2"></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: 3.5
    };
  }
};
</script>

We have the show-value and show-value-max props to display the selected and maximum star values respectively.

Sizing

Like other components, we can change the sizing of the star rating component with the size prop.

The value can be 'sm' or ’lg' ,

For example, we can write:

<template>
  <div id="app">
    <b-form-rating v-model="value" size="sm"></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: 3.5
    };
  }
};
</script>

and we get extra small stars.

'lg' will make the stars extra large.

Make Stars Inline

The stars can be made inline with the inline prop.

For instance, we can write:

<template>
  <div id="app">
    <b-form-rating inline value="4"></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: 4
    };
  }
};
</script>

Then the rating component will be displayed inline.

Borderless

The star rating component has a border by default.

We can remove it with the no-border prop.

For example, we can write:

<template>
  <div id="app">
    <b-form-rating no-border value="4"></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: 4
    };
  }
};
</script>

Now there’s no border displayed.

Disable Input

We can stop users from selecting ratings by using the disabled prop.

For instance, we write:

<template>
  <div id="app">
    <b-form-rating disabled value="4"></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: 4
    };
  }
};
</script>

Make Stars Read Only

We can make the stars component read-only, which means it’s focusable but we can’t choose anything.

For example, we can write:

<template>
  <div id="app">
    <b-form-rating readonly value="4"></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: 4
    };
  }
};
</script>

Conclusion

There are lots of customization options for the star rating component.

The icons can be changed.

We add half-filled icons. Also, we can add a clear button to clear the ratings.

To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add a date picker to our Vue app.

Datepicker

BootstrapVue comes with its own date picker component. We can use it instead of using another library to add one. We can add the b-form-datepicker to add the date picker.

For instance, we can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value"></b-form-datepicker>
    <p>Value: '{{ value }}'</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "2020-05-13"
    };
  }
};
</script>

We have the b-form-datepicker with the v-model directive to bind to the value field. value is updated with the date string when we select a date.

It can take a few props to customize it. We can disable it, which means the navigation and date selection are all disabled. The disabled prop disables the date picker.

Also, we can make the date picker read-only, which means that we can navigate through the dates, but can’t select any date. The readonly prop makes the date picker read-only.

For instance, we can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" :disabled="true"></b-form-datepicker>
    <p>Value: '{{ value }}'</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "2020-05-13"
    };
  }
};
</script>

to disable the date picker.

And we write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" :readonly='true'></b-form-datepicker>
    <p>Value: '{{ value }}'</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "2020-05-13"
    };
  }
};
</script>

to make the date picker read-only.

Date Constraints

We can restrict the date range that’s selectable with the min and max props.

For example, we can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" :min="min" :max="max"></b-form-datepicker>
    <p>Value: '{{ value }}'</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "2020-05-13",
      min: new Date(2020, 4, 1),
      max: new Date(2020, 4, 31)
    };
  }
};
</script>

Then we can only select dates within May 2020.

Disabling Dates

We don’t have to restrict dates from a range. We can disable dates based on some other selection criteria. The date-disabled-fn prop takes a function for dates to disable.

For instance, we can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" :date-disabled-fn="dateDisabled"></b-form-datepicker>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    dateDisabled(ymd, date) {
      const weekday = date.getDay();
      return weekday >= 1 && weekday <= 5;
    }
  }
};
</script>

Then we can only select weekend dates. date is a Date instance so we can call methods available for it like getDay .

Validation States

b-form-datepicker can have the validation state displayed. We just have to pass a value to the state prop to display it.

For instance, we can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" :state="isValid"></b-form-datepicker>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: undefined
    };
  },
  computed: {
    isValid() {
      return new Date(this.value).getDay() === 1;
    }
  }
};
</script>

We have a computed property isValid that returns whether the day of the week is 1. 1 indicates that it’s Tuesday. So when we pick a Tuesday, then the date picker is green. Otherwise, it’s red.

The validation status is only displayed when a date is picked.

Styling

We can change the size of the date picker with the size prop.

For example, we can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" size="sm"></b-form-datepicker>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: undefined
    };
  }
};
</script>

We set the size to 'sm' , which is small. Alternatively, we can set it to 'lg' , which is big. The placeholder can be set with the placeholder prop.

We can write:

<template>
  <div id="app">
    <b-form-datepicker v-model="value" placeholder="Choose a date"></b-form-datepicker>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: undefined
    };
  }
};
</script>

to display the ‘Choose a date’ placeholder.

Conclusion

The b-form-datepicker lets us pick dates and show it.

It has many customization options.

We can set the date range users can select.

Also, we can change the size and placeholder.

To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to customize checkboxes with BootstrapVue.

HTML Checkbox Text

We can have HTML in our checkbox text. Instead of the text property, we use the html to set the text.

However, we should be careful of cross-site scripting attacks since the HTML won’t be sanitized before being displayed.

For example, we can write:

<template>
  <div id="app">
    <b-form-group label="fruits">
      <b-form-checkbox-group v-model="selected" :options="options" name="fruits"></b-form-checkbox-group>
    </b-form-group>
    <div>{{ selected }}</div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      options: [
        { text: "orange", value: "orange", disabled: false },
        { html: "<b>apple</b>", value: "apple", disabled: false },
      ],
      selected: []
    };
  }
};
</script>

We have html: “<b>apple</b>” to make ‘apple’ bold.

Inline and Stacked Checkboxes

We can add the stacked prop on b-form-checkbox-groip to stack the options.

For instance, we can write:

<template>
  <div id="app">
    <b-form-group label="fruits">
      <b-form-checkbox-group stacked v-model="selected" :options="options" name="fruits"></b-form-checkbox-group>
    </b-form-group>
    <div>{{ selected }}</div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      options: [
        { text: "orange", value: "orange", disabled: false },
        { text: "apple", value: "apple", disabled: false },
      ],
      selected: []
    };
  }
};
</script>

Then the checkboxes will be stacked instead of being side by side.

Sizing

We can change the sizing of the checkbox. To do that, we can use the size prop. The available options are sm or lg

For instance, we can write:

<template>
  <div id="app">
    <b-form-checkbox size="sm">Small</b-form-checkbox>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

to get an extra small checkbox.

Button Style Checkbox

We can change the checkbox to look like a button. We can do that with the button prop.

For instance, we can write:

<template>
  <div id="app">
    <b-form-checkbox v-model="checked" name="checked" button>
      <b>{{ checked }}</b>
    </b-form-checkbox>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      checked: false
    };
  }
};
</script>

We add the button prop to the b-form-checkbox and then we put our content inside the tags. Also, we can add the button-variant to change the style of the button.

For instance, we can write:

<template>
  <div id="app">
    <b-form-checkbox v-model="checked" button-variant="info" name="checked" button>
      <b>{{ checked }}</b>
    </b-form-checkbox>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      checked: false
    };
  }
};
</script>

The button-variant takes a variant string like other BootstrapVue components. info would make the button green.

Grouped Button Style Checkboxes

Like buttons, we can group button style checkboxes. We can use the b-form-checkbox-group to create a group of button style checkboxes.

For example, we can write:

<template>
  <div id="app">
    <b-form-checkbox-group v-model="selected" :options="options" buttons></b-form-checkbox-group>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: [],
      options: ["apple", "orange", "banana"]
    };
  }
};
</script>

We have the buttons prop to turn the checkbox group into a group of button style checkboxes. Also, we can customize them like buttons.

We can use the size and button-variant props on them.

For example, we can write:

<template>
  <div id="app">
    <b-form-checkbox-group
      button-variant="primary"
      size="lg"
      v-model="selected"
      :options="options"
      buttons
    ></b-form-checkbox-group>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: [],
      options: ["apple", "orange", "banana"]
    };
  }
};
</script>

We made our button style checkboxes big with size="lg" and button-variant='primary' make them blue.

Switch Style Checkboxes

We can make a checkbox look like a switch toggle.

For instance, we can write:

<template>
  <div id="app">
    <b-form-checkbox v-model="checked" name="check-button" switch>{{ checked }}</b-form-checkbox>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      checked: false
    };
  }
};
</script>

We add the switch prop to make a checkbox look like a toggle switch.

Conclusion

We can do many things with checkboxes.

The text can be customized.

We can also make each checkbox look like buttons.

Their sizes can also change.

We can also make checkboxes look like a toggle switch.

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add button groups and toolbars to group buttons.

We also look at how to use the calendar to let users select dates.

Button Group

Button groups let us group a series of buttons together.

To add a button group, we can use the b-button-group component.

For instance, we can write:

<template>
  <div id="app">
    <b-button-group>
      <b-button>Button 1</b-button>
      <b-button>Button 2</b-button>
    </b-button-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the b-button-group component with b-button components inside.

Vertical Groups

We can make the group vertical by adding the vertical prop:

<template>
  <div id="app">
    <b-button-group vertical>
      <b-button>Button 1</b-button>
      <b-button>Button 2</b-button>
    </b-button-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Then we make the buttons arranged vertically.

Dropdown Menu

We can add dropdown menus inside our button group.

For instance, we can write:

<template>
  <div id="app">
    <b-button-group>
      <b-button>Button 1</b-button>
      <b-dropdown right text="Menu">
        <b-dropdown-item>foo</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item>bar</b-dropdown-item>
      </b-dropdown>
    </b-button-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have a dropdown menu on the right of the button with the b-dropdown component.

We have b-dropdown-itemn and b-dropdown-divider components inside.

Button Toolbar

A button toolbar is similar to a button group.

It groups multiple buttons together.

Also, we can use it to group multiple button groups together.

We use the b-button-toolbar component to create a button toolbar.

For instance, we can write:

<template>
  <div id="app">
    <b-button-toolbar>
      <b-button-group class="mx-1">
        <b-button>apple</b-button>
        <b-button>orange</b-button>
      </b-button-group>
      <b-button-group class="mx-1">
        <b-button>banana</b-button>
        <b-button>grape</b-button>
      </b-button-group>
    </b-button-toolbar>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

The mx-1 class make the groups spaced apart.

We apply to the button groups to add a margin between them.

We can also add a dropdown menu inside a button toolbar as we do with button groups.

For instance, we can write:

<template>
  <div id="app">
    <b-button-toolbar>
      <b-button-group class="mx-1">
        <b-button>apple</b-button>
        <b-button>orange</b-button>
      </b-button-group>

      <b-dropdown class="mx-1" right text="menu">
        <b-dropdown-item>foo</b-dropdown-item>
        <b-dropdown-item>bar</b-dropdown-item>
      </b-dropdown>

      <b-button-group class="mx-1">
        <b-button>banana</b-button>
        <b-button>grape</b-button>
      </b-button-group>
    </b-button-toolbar>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the same classes to keep them apart.

The text prop sets the text for the dropdown button.

b-dropdown-item have the dropdown items.

Calendar

BootstrapVue has the b-calendar component to create a calendar.

For instance, we can write:

<template>
  <div id="app">
    <b-calendar v-model="date" @context="onContext" locale="en-US"></b-calendar>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      date: new Date()
    };
  },
  methods: {
    onContext(e) {
      console.log(e);
    }
  }
};
</script>

We have the onContext method to get the selected date value when the calendar is clicked.

date is the model, which we bind to the calendar with v-model .

Disabled and Readonly State

We can disable the calendar with the disabled prop.

Likewise, we can add the readonly prop to make it read-only.

The difference between them is that disabled removes all interactivity, but readonly will disable selecting a date, but keep the component interactive.

So if we have:

<b-calendar disabled locale="en-US"></b-calendar>

then we disable the whole calendar.

If we have

<b-calendar readonly locale="en-US"></b-calendar>

Then we can navigate through the calendar but can’t select anything.

Date Constraints

We can limit the date range that can be selected with the min and max props.

For instance, we can write:

<template>
  <div id="app">
    <b-calendar v-model="date" :min="min" :max="max" locale="en-US"></b-calendar>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      date: new Date(),
      min: new Date(2020, 0, 1),
      max: new Date(2020, 11, 31)
    };
  }
};
</script>

Then we can only select dates that are in the year 2020.

Conclusion

We can use the calendar component to let users select dates.

The selectable date range can be limited.

Also, we can group buttons with button groups and button toolbars.