Formatting Dates and Numbers

To globalize your application, register the appropriate culture while registering the C1 MVC scripts. MVC includes over 40 culture files you can choose from.

Please select a culture

Dates

Dates are formatted using the Globalize.formatDate function. For details regarding format strings, please refer the online documentation.

Format	Description	Result
d	Short Date Pattern	4/8/2025
D	Long Date Pattern	Tuesday, April 8, 2025
f	Full Date/Time Pattern (short time)	Tuesday, April 8, 2025 1:57 AM
F	Full Date/Time Pattern (long time)	Tuesday, April 8, 2025 1:57:38 AM
t	Short Time Pattern	1:57 AM
T	Long Time Pattern	1:57:38 AM
'Q'Q yyyy	Quarter/Year	Q2 2025
MMMM dd, yyyy	Custom format	April 08, 2025

In addition to the standard .NET format specifiers, our MVC controls support a few additional specifiers including 'Q/q' for quarter, 'U/u' for fiscal quarter, and 'EEEE/eeee' for fiscal year.

Numbers

Numbers are formatted using the Globalize.formatNumber function. For details regarding format strings, please refer the online documentation.

Value

Precision

Specifier	Description	Result
n*	Number	1,234.57
*n,**	Number (thousands)	1.23
*n,,**	Number (millions)	0.00
f*	Fixed-point	1234.57
g*	General (no trailing zeros)	1234.57
d*	Decimal (integers)	1235
x*	Hexadecimal (integers)	4d3
c*	Currency	$1,234.57
*c€**	Currency (explicit currency symbol)	€1,234.57
c*	Currency (no currency symbol)	1,234.57
p*	Percent	123,457.00%

Our numeric formats allow you to include an explicit currency symbol instead of the symbol of current culture. For example, an English application may need to generate lists with amounts in Dollars, Euros, and Yens.

// This file locates: "Scripts/Lesson/C1Mvc/Formatting.js".
c1.documentReady(function () {
    // select culture
    var theCulture = wijmo.Control.getControl('#theCulture');
 
    // value and precision
    var theValue = wijmo.Control.getControl('#theValue');
    theValue.valueChanged.addHandler(updateTables);
    var thePrecision = wijmo.Control.getControl('#thePrecision');
    thePrecision.valueChanged.addHandler(updateTables);
 
    // update the tables
    updateTables();
    function updateTables() {
   
        // update dates
        var theDate = new Date();
        var rows = document.body.querySelectorAll('#tblDates tbody tr');
        for (var i = 0; i < rows.length; i++) {
            var cells = rows[i].children,
            fmt = cells[0].textContent;
            cells[2].textContent = wijmo.Globalize.format(theDate, fmt);
        }
 
        // update numbers
        var rows = document.body.querySelectorAll('#tblNumbers tbody tr');
        for (var i = 0; i < rows.length; i++) {
            var cells = rows[i].children,
            fmt = cells[0].textContent.replace('*', thePrecision.value.toString());
            cells[2].textContent = wijmo.Globalize.format(theValue.value, fmt);
        }
    }
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: Formatting
        public ActionResult Formatting()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Mvc.Formatting_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.Formatting_Text1)
</p>
 
<label>
    @Html.Raw(Resources.C1Mvc.Formatting_Text2)
    @Html.Partial("_CultureSelector")
</label>
 
<h2>
    @Html.Raw(Resources.C1Mvc.Formatting_Title1)
</h2>
<p>
    @Html.Raw(Resources.C1Mvc.Formatting_Text3)
</p>
<table id="tblDates" class="table table-condensed">
    <thead>
    <th>@Html.Raw(Resources.C1Mvc.Formatting_Text4)</th>
    <th>@Html.Raw(Resources.C1Mvc.Formatting_Text5)</th>
    <th>@Html.Raw(Resources.C1Mvc.Formatting_Text6)</th>
    </thead>
    <tbody>
        <tr>
            <td><b>d</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text7)</td>
            <td>xx</td>
        </tr>
        <tr>
            <td><b>D</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text8)</td>
            <td>xx</td>
        </tr>
        <tr>
            <td><b>f</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text9)</td>
            <td>xx</td>
        </tr>
        <tr>
            <td><b>F</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text10)</td>
            <td>xx</td>
        </tr>
        <tr>
            <td><b>t</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text11)</td>
            <td>xx</td>
        </tr>
        <tr>
            <td><b>T</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text12)</td>
            <td>xx</td>
        </tr>
        <tr>
            <td><b>'Q'Q yyyy</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text13)</td>
            <td>xx</td>
        </tr>
        <tr>
            <td><b>MMMM dd, yyyy</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text14)</td>
            <td>xx</td>
        </tr>
    </tbody>
</table>
 
<div class="panel panel-warning">
    <div class="panel-heading">
        @Html.Raw(Resources.C1Mvc.Formatting_Text15)
    </div>
</div>
 
<h2>
    @Html.Raw(Resources.C1Mvc.Formatting_Title2)
</h2>
<p>
    @Html.Raw(Resources.C1Mvc.Formatting_Text16)
</p>
<label>
    @Html.Raw(Resources.C1Mvc.Formatting_Text17)
    @Html.C1().InputNumber().Id("theValue").Value(1234.5678).Step(1)
</label>
<label>
    @Html.Raw(Resources.C1Mvc.Formatting_Text18)
    @Html.C1().InputNumber().Id("thePrecision").Value(2).Step(1).Min(0).Max(10)
</label>
 
<table id="tblNumbers" class="table table-condensed">
    <thead>
    <th>@Html.Raw(Resources.C1Mvc.Formatting_Text19)</th>
    <th>@Html.Raw(Resources.C1Mvc.Formatting_Text5)</th>
    <th class="text-right">@Html.Raw(Resources.C1Mvc.Formatting_Text6)</th>
    </thead>
    <tbody>
        <tr>
            <td><b>n*</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text20)</td>
            <td class="text-right">xx</td>
        </tr>
        <tr>
            <td><b>n*,</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text21)</td>
            <td class="text-right">xx</td>
        </tr>
        <tr>
            <td><b>n*,,</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text22)</td>
            <td class="text-right">xx</td>
        </tr>
        <tr>
            <td><b>f*</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text23)</td>
            <td class="text-right">xx</td>
        </tr>
        <tr>
            <td><b>g*</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text24)</td>
            <td class="text-right">xx</td>
        </tr>
        <tr>
            <td><b>d*</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text25)</td>
            <td class="text-right">xx</td>
        </tr>
        <tr>
            <td><b>x*</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text26)</td>
            <td class="text-right">xx</td>
        </tr>
        <tr>
            <td><b>c*</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text27)</td>
            <td class="text-right">xx</td>
        </tr>
        <tr>
            <td><b>c*€</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text28)</td>
            <td class="text-right">xx</td>
        </tr>
        <tr>
            <td><b>c*&#x200b;</b></td> <!-- &#x200b; is a zero-width space -->
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text29)</td>
            <td class="text-right">xx</td>
        </tr>
        <tr>
            <td><b>p*</b></td>
            <td>@Html.Raw(Resources.C1Mvc.Formatting_Text30)</td>
            <td class="text-right">xx</td>
        </tr>
    </tbody>
</table>
 
<div class="panel panel-warning">
    <div class="panel-heading">
        @Html.Raw(Resources.C1Mvc.Formatting_Text31)
    </div>
</div>