Formats

You can control the format of the NumericTextBox by using the format property.

It accepts string or [NumberFormatOptions] parameters. When format is set and the input element is not focused, the value is formatted accordingly. By default, the format is set to 'n2'.

For more information on the date and number formats KendoVue supports, refer to the kendo-intl GitHub repository.

<div id="vueapp" class="vue-app">
    <div>
        <h6>Decimal</h6>
        <numerictextbox
            :format="'n2'"
            :default-value="value"
        ></numerictextbox>
        <h6>Percentage</h6>
        <numerictextbox
            :format="'p'"
            :default-value="percentage"
            :min="0"
            :max="1"
            :step="0.1"
        ></numerictextbox>
            <h6>Currency</h6>
        <numerictextbox
            :default-value="value"
            :format="'c2'"
            :min="0"
        ></numerictextbox>
        <h6>Currency with format options</h6>
        <numerictextbox
            :default-value="value"
            :min="0"
            :format="formatOptions"
        ></numerictextbox>
    </div>
</div>
import { NumericTextBox } from '@progress/kendo-vue-inputs';

Vue.component('numerictextbox', NumericTextBox);

new Vue({
    el: '#vueapp',
    data: function(){
        return {
            value: 5,
            percentage: 0.7,
            formatOptions: {
                style: 'currency',
                currency: 'EUR',
                currencyDisplay: 'name'
            }
        };
    }
});

In this article