javascriptvue.jsprimevue

How to make PrimeVue InputNumber component use period character as decimal separator instead of comma?

Is there a away to make PrimeVue InputNumber component use period character as decimal separator instead of comma?

Solution

  • With the locale attribute, you can specify exactly which of the declared formatting types you need. I think you're looking for something like en-US.

    const { createApp, ref } = Vue;

const app = createApp({
  template: `
    <p-inputnumber v-model="value" mode="decimal" :locale="locale" />
  `,
  setup() {
    const value = ref(1234.12); // 1,234.12 (int: 1234, fraction: 12)
    const locale = 'en-US';
    
    return { value, locale };
  },
});

app.use(PrimeVue.Config, {
  theme: {
    preset: PrimeVue.Themes.Aura,
  },
});

app.component('p-inputnumber', PrimeVue.InputNumber);

app.mount('#app');
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
<script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"></script>

<div id="app"></div>

    Without thousands separators

    If you set the useGrouping property to false (by default it's true), it will display numbers without thousand separators.

    const { createApp, ref } = Vue;

const app = createApp({
  template: `
    <p-inputnumber v-model="value" mode="decimal" :useGrouping="grouping" :locale="locale" />
  `,
  setup() {
    const value = ref(1234.12); // 1,234.12 (int: 1234, fraction: 12)
    const locale = 'en-US';
    const grouping = false; // 1,234 -> 1234
    
    return { value, locale, grouping };
  },
});

app.use(PrimeVue.Config, {
  theme: {
    preset: PrimeVue.Themes.Aura,
  },
});

app.component('p-inputnumber', PrimeVue.InputNumber);

app.mount('#app');
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
<script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"></script>

<div id="app"></div>

    Accept the comma (,) as a dot (.)

    With the @keydown emit, you can capture the pressed key, even if it's incorrect. You can then check if a comma was pressed, if there is a dot in the value, and under the right conditions, you can insert a dot into the input at the current cursor position.

    After that, you need to manually increment the cursor position by 1, as if it was typed.

    const { createApp, ref } = Vue;

const app = createApp({
  template: `
    <p-inputnumber
      v-model="value" mode="decimal"
      :useGrouping="grouping" :locale="locale"
      @keydown="handleInput"
    />
  `,
  setup() {
    const value = ref(1234.12); // 1,234.12 (int: 1234, fraction: 12)
    const locale = 'en-US';
    const grouping = false; // 1,234 -> 1234
    
    const handleInput = (event) => {
      // Check if the user pressed a comma
      if (
        event.key === ',' &&
        !String(event.target.value).includes('.') &&
        String(event.target.value).length > 0
      ) {
        event.preventDefault();
        
        const input = event.target;
        const cursorPosition = input.selectionStart; // Get the cursor position
        const currentValue = input.value;

        // Insert the dot at the cursor position instead of comma
        const updatedValue = currentValue.substring(0, cursorPosition) + '.' + currentValue.substring(cursorPosition);

        // Update the input value and increment the cursor position
        value.value = updatedValue;
        input.setSelectionRange(cursorPosition + 1, cursorPosition + 1); 
      }
    };
    
    return { value, locale, grouping, handleInput };
  },
});

app.use(PrimeVue.Config, {
  theme: {
    preset: PrimeVue.Themes.Aura,
  },
});

app.component('p-inputnumber', PrimeVue.InputNumber);

app.mount('#app');
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
<script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"></script>

<div id="app"></div>