Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/Common/Value_Formatting/ below:

DevExtreme Vue - Value Formatting

This article describes the API used to apply a format to date and numeric values. The specified format is the same in any locale unless Intl or Globalize is used.

Predefined formats are string literals for formatting numbers and dates. See the format.type description for a full list.

Set the format UI component property to apply a predefined format. In the following code, this property specifies the format and precision of the tooltip's value in the Slider UI component. The value contains two decimal digits when the precision value is 2.

$(function() {
    $("#sliderContainer").dxSlider({
        min: 0, max: 10,
        value: 6, step: 0.01,
        tooltip: {
            enabled: true,
            format: {
                type: "fixedPoint",
                precision: 2
            }
        }
    });
});

<dx-slider
    [min]="0" [max]="10"
    [(value)]="sliderValue" [step]="0.01">
    <dxo-tooltip
        [enabled]="true">
        <dxo-format
            type="fixedPoint"
            [precision]="2">
        </dxo-format>
    </dxo-tooltip>
</dx-slider>

import { DxSliderModule } from "devextreme-angular";
// ...
export class AppComponent {
    sliderValue: number = 6;
}
@NgModule({
    imports: [
        // ...
        DxSliderModule
    ],
    // ...
})

<template>
    <DxSlider
        :min="0" :max="10"
        v-model:value="sliderValue" :step="0.01">
        <DxTooltip
            :enabled="true">
            <DxFormat
                type="fixedPoint"
                :precision="2"
            />
        </DxTooltip>
    </DxSlider>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxSlider, {
    DxTooltip,
    DxFormat
} from 'devextreme-vue/slider';

export default {
    components: {
        DxSlider,
        DxTooltip,
        DxFormat
    },
    data() {
        return {
            sliderValue: 6
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Slider, {
    Tooltip,
    Format
} from 'devextreme-react/slider';

export default function App() {
    return (
        <Slider
            min={0} max={10}
            defaultValue={6} step={0.01}>
            <Tooltip enabled>
                <Format
                    type="fixedPoint"
                    precision={2}
                />
            </Tooltip>
        </Slider>
    );
}

The format property in the previous example is specified with an object which allows you to specify the precision. However, you can specify the format property with a string literal if this is not required.

• RangeSelector Formatting Demo

Intl is the short name used to refer to a particular ECMAScript Internationalization API object. DevExtreme supports this API and its value formatting capabilities out of the box.

A UI component's format property is compatible with the options parameter of the Intl.NumberFormat and Intl.DateTimeFormat. To apply an Intl format, specify the options parameter's fields in the format property:

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "OrderDate",
            format: { year: "2-digit", month: "narrow", day: "2-digit" }
        }, {
            dataField: "SaleAmount",
            format: { style: "currency", currency: "EUR", useGrouping: true, minimumSignificantDigits: 3 }
        }]
    });
});

<dx-data-grid ... >
    <dxi-column
        dataField="OrderDate"
        [format]="{ year: '2-digit', month: 'narrow', day: '2-digit' }">
    </dxi-column>
    <dxi-column
        dataField="SaleAmount"
        [format]="{ style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 }">
    </dxi-column>
</dx-data-grid>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="OrderDate"
            :format="orderDateFormat"
        />
        <DxColumn
            data-field="SaleAmount"
            :format="saleAmountFormat">
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumn
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    data() {
        return {
            orderDateFormat: { year: '2-digit', month: 'narrow', day: '2-digit' },
            saleAmountFormat: { style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 }
        }
    },
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Column 
} from 'devextreme-react/data-grid';

class App extends React.Component {
    orderDateFormat = { year: '2-digit', month: 'narrow', day: '2-digit' };
    saleAmountFormat = { style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 };

    render() {
        return (
            <DataGrid ... >
                <Column
                    dataField="OrderDate"
                    format={this.orderDateFormat}
                />
                <Column
                    dataField="SaleAmount"
                    format={this.saleAmountFormat}
                />
            </DataGrid>
        );
    }
}
export default App;

Use Unicode Locale Data Markup Language (LDML) patterns to specify a custom format string. An LDML pattern consists of wildcard characters and characters displayed as is. The format property supports the following wildcard characters:

Numeric Formats

The examples below demonstrate the behavior of "#" and "0" in fractional numbers:

const number = 1234.567;

// Leave the first digit before the decimal point and round up the decimal
format: "0.0" // 4.6

const smallNumber = 0.1234;

// Display nothing in place of a digit
format: "#.#" // .1

const largeNumber = 123456.789;

// Add a group separator
format: ",##0.###" // 123,456.789

The examples below show different ways to apply percentage formatting to decimals. Use caution if your format string starts with a zero ('0'), because the formatted number may lose leading digits.

const smallNumber = 0.01234;

// Represent as a percentage and limit to two decimal digits
format: "#0.##%" // 1.23%

// Add a percent sign and limit to two decimal digits
format: "#0.##'%'" // 0.01%

Date-Time Formats

const date = new Date(2021, 6, 15, 20, 45, 34);

format: "MM/dd/yyyy" // 07/15/2021
format: "MM/dd/yy" // 07/15/21
format: "dd.MM.yyyy" // 15.07.2021
format: "MMMM dd, yyyy" // July 15, 2021
format: "EEEE, MMMM dd" // Thursday, July 15
format: "HH:mm:ss" // 20:45:34
format: "hh:mm a" // 08:45 PM
format: "MMMM dd, yyyy HH:mm:ss" // July 15, 2021 20:45:34

• NumberBox Formatting Demo

A custom function is useful when advanced formatting is required. The value to be formatted is passed to the function as the argument. In the following example, a custom function combines absolute and percentage values for the Slider UI component's tooltip:

$(function() {
    var sliderMaxValue = 10;

    $("#sliderContainer").dxSlider({
        min: 0, max: sliderMaxValue,
        value: 6, step: 0.01,
        tooltip: {
            enabled: true,
            format: function (value) {
                return value + " | " + ((value / sliderMaxValue) * 100).toFixed(1) + "%";
            }
        }
    });
});

<dx-slider
    [min]="0" [max]="sliderMaxValue"
    [(value)]="sliderValue" [step]="0.01">
    <dxo-tooltip
        [enabled]="true"
        [format]="formatSliderTooltip">
    </dxo-tooltip>
</dx-slider>

import { DxSliderModule } from "devextreme-angular";
// ...
export class AppComponent {
    sliderValue = 6;
    sliderMaxValue = 10;
    formatSliderTooltip (value) {
        return value + " | " + ((value / this.sliderMaxValue) * 100).toFixed(1) + "%";
    }
}
@NgModule({
    imports: [
        // ...
        DxSliderModule
    ],
    // ...
})

<template>
    <DxSlider
        :min="0" v-model:max="sliderMaxValue"
        v-model:value="sliderValue" :step="0.01">
        <DxTooltip
            :enabled="true"
            :format="formatSliderTooltip"   
        />
    </DxSlider>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxSlider, {
    DxTooltip
} from 'devextreme-vue/slider';

export default {
    components: {
        DxSlider,
        DxTooltip
    },
    data() {
        return {
            sliderValue: 6,
            sliderMaxValue: 10
        }
    },
    methods: {
        formatSliderTooltip(value) {
            return value + " | " + ((value / this.sliderMaxValue) * 100).toFixed(1) + "%";
        }
    }
}
</script>

import React, { useCallback } from 'react';
import 'devextreme/dist/css/dx.light.css';

import Slider, {
    Tooltip
} from 'devextreme-react/slider';

export default function App() {
    const sliderMaxValue = 10;
    const formatSliderTooltip = useCallback((value) => {
        return value + " | " + ((value / sliderMaxValue) * 100).toFixed(1) + "%";
    }, []);

    return (
        <Slider
            min={0} max={sliderMaxValue}
            defaultValue={6} step={0.01}>
            <Tooltip enabled
                format={formatSliderTooltip}
            />
        </Slider>
    );
}

DevExtreme provides an API for formatting any date or number in your app. The following example shows how to format dates. The formatDate() method applies a predefined format to a date. A custom function or format string can be applied instead. The result is a string. This string is then converted back to a date using the parseDate() method.

$(function() {
    var date = new Date();
    $("#dateInput").val(DevExpress.localization.formatDate(date, "shortDate"));
    $("#dateInput").change(function(event) {
        date = DevExpress.localization.parseDate(event.target.value, "shortDate");
    });
});

<input id="dateInput"/>

import { formatDate, parseDate } from "devextreme/localization";
// ...
export class AppComponent {
    _date: Date = new Date();
    get date() {
        return formatDate(this._date, "shortDate");
    }
    set date(value) {
        this._date = parseDate(value, "shortDate");
    }
}

<input 
    [value]="date"
    (change)="date = $event.target.value"
/>

<template>
    <input
        :value="date"
        @change="date = $event.target.value"
    />
</template>

<script>
import { formatDate, parseDate } from 'devextreme/localization';

let date = new Date();

export default {
    computed: {
        date: {
            get: function() {
                return formatDate(date, "shortDate");
            },
            set: function(value) {
                date = parseDate(value, "shortDate");
            }
        }
    }
}
</script>

import React, { useState, useCallback } from "react";
import { formatDate, parseDate } from "devextreme/localization";

export default function App() {
    const [date, setDate] = useState(new Date());
    const getFormattedDate = useCallback(() => {
        return formatDate(date, "shortDate")
    }, [date]);
    const setParsedDate = useCallback((event) => {
        setDate(parseDate(event.target.value, "shortDate"));
    }, []);

    return (
        <input
            defaultValue={getFormattedDate()}
            onChange={setParsedDate}
        />
    );
}

Similarly, you can use the formatNumber() and parseNumber() methods to format and parse a number or currency.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4