BootstrapVue — Text Area Customization and Time Picker
By: John Au-Yeung
Tags: Technology, Programming, Software Development, Web Development, JavaScript

Photo by Daniel Klein on Unsplash

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 a text area and add a time picker.

v-model Modifiers

The lazy , trim , number modifiers for v-model aren’t supported with the b-form-textarea component.

However, there are trim , number , and lazy props can be used to replace those modifiers.

Debounce

We can add the debounce prop to delay the input value binding to the state.

For instance, we can write:

<template>

<div id="app">

<b-form-textarea v-model="text" placeholder="Enter text" debounce="500" ></b-form-textarea>

<p>{{text}}</p>

</div>

</template> <script>

export default {

name: "App",

data() {

return {

text: ""

};

}

};

</script>

Then we delay the input value binding by 500 ms.

Autofocus

The autofocus prop can be added to the b-form-textarea to make it focus when the component loads or reactive in a keep-alive component.

Timepicker

We can use the b-form-timepicker component to add a time picker.

For instance, we can write:

<template>

<div id="app">

<b-form-timepicker v-model="value" locale="en"></b-form-timepicker>

<div>Value: {{ value }}</div>

</div>

</template> <script>

export default {

name: "App",

data() {

return {

value: ""

};

}

};

</script>

Then we can pick the time from the displayed input box.

The locale prop lets us change the locale.

value has the selected value, which is bound to the inputted value with v-model .

Disabled or Read Only States

We can add the disabled prop to remove all interactivity on the b-form-timepicker component.

readonly disables selecting a time, but will keep the component interactive.

We can write:

<b-form-timepicker v-model="value" disabled></b-form-timepicker>

or:

<b-form-timepicker v-model="value" readonly></b-form-timepicker>

to change both.

Validation States

Like other input comments, we can display the validation state with it.

For instance, we can write:

<template>

<div id="app">

<b-form-timepicker v-model="value" :state="!!value"></b-form-timepicker>

<div>Value: {{ value }}</div>

</div>

</template> <script>

export default {

name: "App",

data() {

return {

value: ""

};

}

};

</script>

We set the state prop to the value of value converted to a boolean.

Then we’ll see a red box if the time isn’t selected.

Otherwise, we see a green box.

Setting Seconds

We can set the seconds by adding the show-seconds prop.

For instance, we can write:

<template>

<div id="app">

<b-form-timepicker v-model="value" show-seconds></b-form-timepicker>

<div>Value: {{ value }}</div>

</div>

</template> <script>

export default {

name: "App",

data() {

return {

value: ""

};

}

};

</script>

Now we see the seconds box and we can set the seconds.

Sizing

We can add the size prop to change the size of the time picker sizing.

For example, we can write:

<template>

<div id="app">

<b-form-timepicker v-model="value" size="sm"></b-form-timepicker>

<div>Value: {{ value }}</div>

</div>

</template> <script>

export default {

name: "App",

data() {

return {

value: ""

};

}

};

</script>

to shrink the time picker’s size.

We can also change the value to 'lg' to make it larger than the default.

Optional Controls

We can add optional controls to the time picker with a few props.

For instance, we can add the now-button to let users pick the current time.

reset-button displays a reset button to let users reset the time.

For example, we can write:

<template>

<div id="app">

<b-form-timepicker v-model="value" now-button reset-button></b-form-timepicker>

<div>Value: {{ value }}</div>

</div>

</template> <script>

export default {

name: "App",

data() {

return {

value: ""

};

}

};

</script>

Then we can see the buttons on the time picker.

Button Only Mode

The button-only prop lets us change the time picker to button-only mode.

For example, we can write:

<template>

<div id="app">

<b-input-group class="mb-3">

<b-form-input v-model="value" type="text" placeholder="Select time"></b-form-input>

<b-input-group-append>

<b-form-timepicker v-model="value" right button-only></b-form-timepicker>

</b-input-group-append>

</b-input-group>

<div>Value: {{ value }}</div>

</div>

</template> <script>

export default {

name: "App",

data() {

return {

value: ""

};

}

};

</script>

Then we have an input box with the time displayed.

But we can’t click it to show the time picker.

The button on the right of the input box lets us select the time.

We need the right prop so that the right edge of the date picker will be aligned to the right side of the button.

Photo by Mike Benna on Unsplash

Conclusion

We can add denounce to a text area.

Also, we can add a time picker to let us add a time picker control and customize it.