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.
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.
