igGrid datepicker is setting a timezone / DST offset

[Rus Scelkunovs]

Description

We're now in BST (British Summer Time) meaning there's a 1h offset from UTC and hence when used in igGrid datepickers are setting dates with 1h offset (e.g. Wed May 22 2019 00:00:00 GMT+0100 (British Summer Time)) and therefore, when saved, 1h hour gets taken off and thus the date is one day behind (May 21).

• igniteui-angular version: 17.2.412
• browser: Chrome

[Konstantin Dinev]

@ruslanss I've transferred the issue to the ignite-ui repository.

@Lipata Can you please take a look?

[Nikolay Alipiev]

Hi, @ruslanss.

Here is a topic, describing the configuration required to have proper date shown in the editors and proper date saved as a value or transferred to the server.

Is your case that you open editor provider in the igGrid (client only, not MVC wrappers), set a date, and when you exit edit mode, then the date in the grid shows previous day? What is the data source of the grid, and especially what is the format of the date field? Do you have a demo that you can share?

Thank you!

[Nikolay Alipiev]

@ruslanss, did you had the chance to check the topic?

[Rus Scelkunovs]

Hi, @Lipata .
I have tried this option and still the issue is happening.

here's my grid config:

       columns: [ {
          headerText: 'Start Date',
          key: 'startDate',
          dataType: 'date',
          width: '100px',
          format: 'dd/MM/yy',
          enableUTCDates: true
        } ] ,
      features: [ {
          name: 'Tooltips'
        }, 
        {
          name: 'Updating',
          enableAddRow: true,
          editMode: 'cell',
          columnSettings: [       
            {
              columnKey: 'startDate',
              readOnly: false,
              required: true,
              editorType: 'datepicker',
              enableUTCDates: true
            }]
         }]

what am I missing?

[Nikolay Alipiev]

@ruslanss, are the dates, that are coming from the data source - bound to the grid, in this format 21/06/2019 or are in a UTC format 2019-06-21T00:00:00+00:00 (or 2019-06-21T00:00:00Z). Here I've made a demo with your settings. Can you try to reproduce your problem?

[Rus Scelkunovs]

Hey, we store all dates in UTC format in database.
server response JSON:

[{"id":1,""startDate":"2019-06-21T00:00:00Z","endDate":"2019-06-29T00:00:00Z"}]

when bound to the grid, output from console
this.gridOptions.dataSource

[{id: 1, startDate: "2019-06-21T00:00:00Z", endDate: "2019-06-29T00:00:00Z"}]

on rowadded event:

    rowAdded: function(evt, ui) {
        // Done adding - re-enable save
        if (ui.values['startDate'])  // console output below:

what is being sent to the server:

{storeId: "1", id: -1, cdcId: "20", startDate: "2019-07-01T23:00:00.000Z", endDate: null}

🤷‍♂️

P.S. do you have a jsfiddle with angular model bound to the grid?

[Rus Scelkunovs]

@Lipata any update?

[Rus Scelkunovs]

not sure why but enableUTCDates is false when it goes into $.ig.formatDates function.
bear in mind we're on v17.2.412

i have enableUTCDates set to true at gridOptions level as well as columns and inside updating feature

[Nikolay Alipiev]

@ruslanss, sorry for the delay.

Here is another demo. Are you setting it like this:

features: [
	  {
		name: "Updating",
		rowAdded: function(evt, ui) {
			// Done adding - re-enable save
			if (ui.values['BirthDate']) {
				debugger;
					console.log(ui.values['BirthDate']);
			}
		},
		columnSettings: [
		{
		  columnKey: "BirthDate",
		  readOnly: false,
		  required: true,
		  editorType: 'datepicker',
		  editorOptions: {
			  enableUTCDates: true
		  }
		}] 
	}
]

[Rus Scelkunovs]

upon further debugging i discovered that the column setting required was: dateDisplayType='utc'