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.
