Skip to main content

DHTMLX Spreadsheet. Format localization example

This demo shows how to configure regional number, date, time, and currency formatting in DHTMLX Spreadsheet using the localization configuration property.

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    localization: {
        decimal: ",", // "." | "," - the decimal separator ("." by default)
        thousands: " ", // "." | "," | " " | "" - the thousands separator ("," by default)
        currency: "¥", // the currency sign ("$" by default)
        dateFormat: "%d/%M/%Y", // the date format ("%d/%m/%Y" by default)
	    timeFormat: 24, // 12 | 24 - the time format (12 by default)
    }
});

spreadsheet.parse(dataset);
<!-- component container -->
<div style="height: 100%; max-width:100%" id="spreadsheet"></div>

<!-- dataset -->

<script>
const dataset = {
    styles: {
        bold: {
            "font-weight": "bold",
        },
        right: {
            "justify-content": "flex-end",
            "text-align": "right",
        },
    },
    data:  [
        { cell: "a1", value: "Country", css:"bold" },
        { cell: "b1", value: "Product", css:"bold" },
        { cell: "c1", value: "Price", css:"right bold" },
        { cell: "d1", value: "Amount", css:"right bold" },
        { cell: "e1", value: "Total Price", css:"right bold" },
        { cell: "f1", value: "Date", css:"right bold" },
        { cell: "g1", value: "Time", css:"right bold" },

        { cell: "a2", value: "Ecuador" },
        { cell: "b2", value: "Banana" },
        { cell: "c2", value: 6.68, format: "currency" },
        { cell: "d2", value: 430 },
        { cell: "e2", value: 2872.4, format: "currency" },
        { cell: "f2", value: new Date(), format: "date" },
        { cell: "g2", value: "12:10", format: "time", css:"right" },

        { cell: "a3", value: "Belarus" },
        { cell: "b3", value: "Apple" },
        { cell: "c3", value: 3.75, format: "currency" },
        { cell: "d3", value: 600 },
        { cell: "e3", value: 2250, format: "currency" },
        { cell: "f3", value: "23/Nov/2023", format: "date" },
        { cell: "g3", value: "15:15", format: "time", css:"right" },

        { cell: "a4", value: "Peru" },
        { cell: "b4", value: "Grapes" },
        { cell: "c4", value: 7.69, format: "currency" },
        { cell: "d4", value: 740 },
        { cell: "e4", value: 5690.6, format: "currency" },
        { cell: "f4", value: "12/Nov/2023", format: "date" },
        { cell: "g4", value: "20:12", format: "time", css:"right" },

        { cell: "a5", value: "Egypt" },
        { cell: "b5", value: "Orange" },
        { cell: "c5", value: 5.86, format: "currency" },
        { cell: "d5", value: 560 },
        { cell: "e5", value: 3281.6, format: "currency" },
        { cell: "f5", value: "30/Nov/2023", format: "date" },
        { cell: "g5", value: "14:28", format: "time", css:"right" },

        { cell: "a6", value: "South Africa" },
        { cell: "b6", value: "Grapefruit" },
        { cell: "c6", value: 8.58, format: "currency" },
        { cell: "d6", value: 800 },
        { cell: "e6", value: 6864, format: "currency" },
        { cell: "f6", value: "17/Nov/2023", format: "date" },
        { cell: "g6", value: "16:54", format: "time", css:"right" },

        { cell: "a7", value: "Spain" },
        { cell: "b7", value: "Lemon" },
        { cell: "c7", value: 9.12, format: "currency" },
        { cell: "d7", value: 650 },
        { cell: "e7", value: 5928, format: "currency" },
        { cell: "f7", value: "22/Nov/2023", format: "date" },
        { cell: "g7", value: "17:40", format: "time", css:"right" },

        { cell: "a8", value: "Iran" },
        { cell: "b8", value: "Pomegranate" },
        { cell: "c8", value: 9.67, format: "currency" },
        { cell: "d8", value: 300 },
        { cell: "e8", value: 2901, format: "currency" },
        { cell: "f8", value: "28/Oct/2023", format: "date" },
        { cell: "g8", value: "11:30", format: "time", css:"right" },
    ],
  };
</script>

Financial and multinational applications must display numbers and dates according to regional conventions: commas as decimal separators in Europe, specific currency symbols for each market, and date formats that match local expectations. Data-level localization ensures values are readable and unambiguous for every audience.

This example passes a localization object to the Spreadsheet constructor with decimal: ",", thousands: " ", currency: "¥", dateFormat: "%d/%M/%Y", and timeFormat: 24. Cells formatted with built-in format IDs like "currency", "date", and "time" automatically render values using the specified regional settings.

Solution overview​

  1. Define a localization object with decimal, thousands, currency, dateFormat, and timeFormat
  2. Pass it in the Spreadsheet constructor: new dhx.Spreadsheet("spreadsheet", { localization: { ... } })
  3. Apply format IDs ("currency", "date", "time") to cells. Values render using the configured locale

Key points​

  • Decimal and thousands: decimal accepts "." or ",", thousands accepts ".", ",", " ", or ""
  • Custom currency in masks: For additional currencies in number masks, use the [$symbol] syntax (e.g., "[$€]#,##0.00") in the formats config
  • Time format: Setting timeFormat: 24 switches the built-in time format mask to 24-hour notation; 12 uses AM/PM

API reference​

  • localization: Configures regional number, date, time, and currency formatting.
  • dateFormat: Sets the date display format string.
  • timeFormat: Sets the time display format (12 or 24).

Additional resources​