datetime column formating

I would like to format a column (datatype = “datetime”) to display the date only. I had tried the following but not working.

headerText: "Date Received", key: "DateReceived", width: "150px", dataType: "datetime", format: "dd/MM/yyyy"

Please help.

Hello,

You need to set dataType to “date” as shown below:

{key: "Date Received", headerText: "Date Received", dataType: "date", format: "dd/MM/yyyy" }

If dataType is "date", then supported formats are following: "date", "dateLong", "dateTime", "time", "timeLong", "MM/dd/yyyy", "MMM-d, yy, h:mm:ss tt", "dddd d MMM", etc.

Refer to the link below for more details on API:

https://www.igniteui.com/help/api/2019.1/ui.iggrid

On the above link, click on the “OPTIONS” tab and expand “columns”  for  more details.

I hope this helps.

I had tried with the datetype = "date" and datatype = "datetime" with different format but it is still not working. Using datatype: "datetime" and format: "date", the result becomes "2006-05-29T00:00:00". Using datatype: "date" and format: "MM/dd/yyyy", the result becomes "NaN/NaN/NaN". The original datatype in the database is datetime, and I check the data is correctly serialized to JSON with "2006-05-29T00:00:00". I just need to format it to display the date only. I think it should be possible. Please help.

Hello,

I have attached a sample which uses CDN references using generated dates on the client side. If the dates are coming from a backend, encoded as UTC; I would recommend you to set enableUTCDates property of grid to true as shown below:

$(".selector").igGrid({ enableUTCDates : true });

Refer to the “OPTIONS” tab from the API documents on the link below:

http://help.infragistics.com/jQuery/2012.2/ui.iggrid

You can also modify the sample I have provided to look in to the behavior you described.

I hope this helps.

 

Hello,

I am just following up to see if you need any further assistance with this matter.

Hello,

I have a problem with formated date in column of grid. I am using Razor syntax for the grid.  Locate and region are bg, one of the column has DataType("date").Format("dateTime"), but now it isn't imposible to sort this column. Could you help me?

 

Hi Marylka,

From your description is not obvious what the problem can be. Format only affects the presentation of the data, so it should not be the cause of the sorting problem.

One reason can be a bug.

Another reason can be the JSON date column serialization.

I need more data in order to further analyze your problem. Here are my questions:

What is your Ignite UI version (including service release)?

What is your jQuery and jQuery UI versions?

Are you using the Ignite UI MVC Wrapper to provide the data?

What type of sorting are you using (local or remote)?

Do you get any JavaScript errors in the browser console when you try to sort?

 

It will be good if you provide a simple sample reproducing the issue.

 

Best regards,

Martin Pavlov

Infragistics, Inc.

Hi, Mr Pavlov,

Thank You for the previous post!

I use Inite UI 2012.2, MVC Wrapper. I don't have any errors in the browser console when I try to sort.

The problem is that I want to display date and time (+ seconds) in bg format but than the sorting by this column doesn't work. I've noticed that when date format contains dots for ex: "dd.MM.yyyy hh:mm:ss" , sorting doesn't work. Now I am using slashs and sorting has incorrect behavior! I think that it sorts date like strings data. I am sending You part of my code :

<script type="text/javascript" src="~/Content/ig/js/infragistics.loader.js"></script>
<script type="text/javascript" src="~/Content/ig/js/jquery-ui-i18n.js"></script>

@(Html.Infragistics()
.Loader()
.ScriptPath(Url.Content("~/Content/ig/js/"))
.CssPath(Url.Content("~/Content/ig/css/"))
.Resources("igGrid.Selection,igGrid.Paging,igGrid.Sorting")
.Theme("metro")
.Locale("bg")
.Regional("bg")
.Render()
)

and the grid:

<table id="grid"></table>
@(Html.Infragistics().Grid(Model.SearchResult).ID("grid")
.FixedHeaders(false).FixedFooters(false)
.JQueryTemplating(true)
.AutoGenerateColumns(false)
.RenderCheckboxes(true)
.Columns(column =>
{
column.For(x => x.ConsumerName).HeaderText(Home.ConsumerName).DataType("string").Width("110px");
column.For(x => x.StartTime).HeaderText(Home.StartDate).Format("dd/MM/yyyy hh:mm:ss").Width("150px");
column.For(x => x.EndTime).HeaderText(Home.EndDate).Format("dd/MM/yyyy hh:mm:ss").Width("150px");

})

.Features(features =>
{
features.Sorting().Type(OpType.Local).Mode(SortingMode.Single).FirstSortDirection("ascending").ApplyColumnCss(false);
features.Paging().Type(OpType.Local).PageSize(10).ShowPageSizeDropDown(false)
.ShowPagerRecordsLabel(false)
.VisiblePageCount(3)
.PrevPageLabelText("")
.NextPageLabelText("")
.ShowFirstLastPages(false);
features.Tooltips()
.Visibility(TooltipsVisibility.Always)
.ColumnSettings(settings =>
{
settings.ColumnSetting().ColumnKey("ConsumerName").AllowTooltips(true);
settings.ColumnSetting().ColumnKey("StartTime").AllowTooltips(true);
settings.ColumnSetting().ColumnKey("EndTime").AllowTooltips(false);

})
.CursorTopOffset(10)
.ShowDelay(100);
features.Resizing().AllowDoubleClickToResize(true).DeferredResizing(true).ColumnSettings(settings =>
{
settings.ColumnSetting().ColumnKey("ConsumerName").MinimumWidth(140);
settings.ColumnSetting().ColumnKey("StartTime").MinimumWidth(140);
settings.ColumnSetting().ColumnKey("EndTime").MinimumWidth(140);

});
features.Selection().Mode(SelectionMode.Row).MultipleSelection(false);
}).Width("940").DataBind().Render())

I am hoping that this is enough information.