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.

#programming #software-development #javascript #technology #web-development #vue