European date format

[Ivan Petrov]

Hello,

Could you tell me how I can set the format of the date picket to be European. For example, instead of 08/23/1999 I would like 23.08.1999 or 23/08/1999. Thank you in advance!

[Berly Christopher]

Hi Krasimir, 

  

  

Greetings from Syncfusion support. 

  

  

We can achieve your requirement by set the date format as “dd.MM.yyyy” or “dd/MM/yyyy” for the Format property to display the date value as “23.08.1999” and “23/08/1999” as mentioned in the below code example.  

  

 

<b>Datepicker with Format:</b> dd/MM/YYYY 

<div><EjsDatePicker Format="dd/MM/yyyy" Width="250px"></EjsDatePicker></div> 

<b>Datepicker with Format:</b> dd.MM.YYYY 

<div><EjsDatePicker Format="dd.MM.yyyy" Width="250px"></EjsDatePicker></div> 

 

  

To know more about format, please refer the below UG documentation link. 

 

UG Link: https://ej2.syncfusion.com/blazor/documentation/datepicker/date-format/  

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/147089/ze/Blazor_Calendar_Format1072719582  

 

  

Else, we can set the locale based on your requirement as mentioned in the below Globalization UG documentation link. So, that DatePicker will be rendered with corresponding date format of the loaded locale. 

 

UG Link: https://ej2.syncfusion.com/blazor/documentation/datepicker/globalization/?no-cache=1  

  

  

Regards, 

Berly B.C 

[Tsvetan]

Hello Berly,

What about when the date is a column in the Grid. For example:

<GridColumn Field="CreatedOn" HeaderText="Created On" Format="dd/MM/yyyy" Type="date" AllowGrouping="false"></GridColumn>

The date that is displayed is not in this format, but like this Tue Sep 03 2019 07:00:46 GMT+0300 (Eastern European Summer Time)

 

The only format that seems to atleast make some formating is yMd, but the result is 8/22/2019, which is still not correct, if it was working correctly it should be 

something like 2019/8/22

Kind Regards,

Tsvetan

[Renjith Singh Rajendran]

Hi Tsvetan, 

  

Thanks for contacting Syncfusion support. 

  

We suggest you to load the corresponding culture’s CLDR data files to apply the corresponding date format for the date columns in Grid. Please load the following CLDR data files using “LoadCldrData” function for cultures other than “en-US”. 

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/global-local/#internationalization 

  

File Name	Path
ca-gregorian	cldr/main/en/ca-gregorian.json
timeZoneNames	cldr/main/en/timeZoneNames.json
numbers	cldr/main/en/numbers.json
numberingSystems	cldr/supplemental/numberingSystems.json
currencies	cldr/main/en/currencies.json

  

In the below code we have loaded the “de” culture files. Please use the code below to load the corresponding cultures CLDR data files. 

  

  

@using Microsoft.JSInterop 

@using Syncfusion.EJ2.Blazor.Grids 

  

<EjsGrid DataSource="@Orders" AllowSorting="true" AllowPaging="true" AllowGrouping="true"> 

    <GridColumns> 

        ... 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

   </GridColumns> 

</EjsGrid> 

 

@code{ 

    [Inject] 

    IJSRuntime JsRuntime { get; set; } 

    EjsGrid<Order> gridInstance; 

    ... 

    protected override void OnAfterRender() 

    { 

       this.JsRuntime.Ejs().LoadLocaleData("wwwroot/de.json").LoadCldrData(new string[] { "wwwroot/scripts/cldr-data/main/de/currencies.json", "wwwroot/scripts/cldr-data/main/de/numbers.json", "wwwroot/scripts/cldr-data/main/de/ca-gregorian.json", "wwwroot/scripts/cldr-data/main/de/timeZoneNames.json",  "wwwroot/scripts/cldr-data/supplemental/numberingSystems.json" }).SetCulture("de").SetCurrencyCode("EUR"); 

    } 

} 

  

  

  

For your convenience we have created the sample using the “de” culture to apply the date format for the date columns based on the corresponding culture. Please download the sample from the below link, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SynfusionTest-620355846 

 

Please get back to us if you need further assistance. 

  

Regards, 

Renjith Singh Rajendran. 

[Ivan Petrov]

Hello, 

Could you possibly add it as a grid feature that you can just specify the format like in the date picker component so in this way we shouldn't have to load scripts? Thank you in advance! :)

[Renjith Singh Rajendran]

Hi Krasimir,

We can achieve this requirement, without loading any culture files or apply Globalization in Grid by using the “Custom Format feature for Blazor Grid”. But currently, we don’t have support to apply custom format for Syncfusion Blazor Grid. So we have logged this as a feature task and added to our feature request list.  

 

We have planned to implement this feature in our subsequent Nuget release which is expected to be roll out on or before September 13,  2019.  

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

Link : https://www.syncfusion.com/feedback/8072/provide-custom-format-support-in-grid 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Renjith Singh Rajendran]

Hi Krasimir, 

  

We regret for the inconvenience caused.  

  

Due to some unforeseen circumstances, we will not be able to include this feature “Custom Format feature for Blazor Grid” in our upcoming Nuget release. But we will implement this feature and this will be included in our subsequent Nuget release which is expected to be rolled out in the first week of October 2019.  

  

Until then we appreciate your patience. 

  

Regards, 

Renjith Singh Rajendran. 

[Ivan Petrov]

Hello,

has changing date formats in the grid been added as a feature yet?

[Renjith Singh Rajendran]

Hi Krasimir, 

We regret for the inconvenience caused.  

Due to some complexities we are facing from our side to implement this feature, we could not include this feature “Custom Format feature for Blazor Grid” in our latest Nuget release. But we will implement this feature and this will be included in our subsequent bi-weekly Nuget release which is expected to be rolled out on or before 16^th October 2019.  

Until then we appreciate your patience. 

Regards, 

Renjith Singh Rajendran. 

[Renjith Singh Rajendran]

Hi Krasimir,  

We are glad to inform you that our latest Nuget package (17.3.0.17) has been successfully rolled out. In this release, we have included the feature “Custom Format Support for Blazor Grid”. Please find the latest Nuget package from the link below, 

Nuget : https://www.nuget.org/packages/Syncfusion.EJ2.Blazor/17.3.0.17-beta 

 

Release Note : https://ej2.syncfusion.com/blazor/documentation/release-notes/17.3.17/#grid 

 

Also ensure to refer the latest version script and css in your application.  

 

     

    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.3.17/fabric.css" rel="stylesheet" /> 

    <script src="https://cdn.syncfusion.com/ej2/17.3.17/dist/ej2.min.js"></script> 

    <script src="https://cdn.syncfusion.com/ej2/17.3.17/dist/ejs.interop.min.js"></script> 

 

 

Please use the below code to apply custom format for Grid columns. 

 

 

<GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" CustomFormat="@(new { type ="date", format="dd.MM.yyyy" })" Type="ColumnType.Date"> 

 

 

You can use custom format string to format the date values. Some of the custom formats and the formatted date values are given in the below table. 

 

Format	Formatted value
{ type=”date”, format=”dd/MM/yyyy”}	04/07/1996
{ type=”date”, format=”dd.MM.yyyy” }	04.07.1996
{ type=”date”, skeleton=”short” }	7/4/96
{ type=”dateTime”, format= ”dd/MM/yyyy hh:mm a” }	04/07/1996 12:00 AM
{ type= “dateTime”, format= “MM/dd/yyyy hh:mm:ss a” }	07/04/1996 12:00:00 AM

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SynfusionTest-794284079 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.