Forum Discussion

Copper Contributor

Feb 02, 2023

Solved

Trying to set date field to midnight SharePoint regional time

I have a SharePoint app where the user can enter a date and update the date field in a SharePoint list item. I want to store the time of the date field to be midnight SharePoint regional time. ...

SvenSieverding

Feb 07, 2023

Hi eshenradgen,

Mhm... the default Javascript date always assumes that you either enter the date in your local timezone or as UTC... Then you can translate it into different timezones...
But you cannot parse a date from a different timzone using Javscript dates

But more complex date calculations work great with moment.js and moment-timezone.js

If you include these libraries

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.40/moment-timezone.min.js"></script>

you can use moment to create UTC timestamps for midnight in every timezone

//Central
var dateString=moment.tz("2023-07-02T00:00", "America/Chicago").utc().format()
// dateString is 2023-07-02T05:00:00Z

//Pacific
var dateString=moment.tz("2023-07-02T00:00", "America/Los_Angeles").utc().format()
// dateString is 2023-07-02T07:00:00Z

If you use "2023-07-02T05:00:00Z" with the former code (Or exchange line 6 from the lower code with line 2 from the upper)

var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
//Single line of text  
oListItem.set_item('Title', 'Midnight Central');
//Format local date to UTC 
var dateString="2023-07-02T05:00:00Z"
oListItem.set_item('MyDate', dateString);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(
    function(){},
    function(){},
);

you create an item with a timestamp at midnight on a SharePoint site set to CST.

From every timezone.

Best Regards,
Sven

PS, but just for fun:

If you now apply the following JSON formatting to that date column

  {  
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
    "elmType": "div",  
    "txtContent": {  
      "operator": "toLocaleString()",  
      "operands": [  
        "@currentField"  
      ]  
    }  
  }

then the time will be still stored in the timezone of the site, but will be displayed in the browser's local timezone. So it would display a a "Pacific" time, even if the site is set to CST.

eshenradgen

Copper Contributor

Feb 07, 2023

SvenSieverding

I tried that and the date is still being as midnight of my computer's time zone. When I ran the code snippet you r provided with my computer set to Pacific Time Zone (UTC-8) and my SharePoint regional setting set to Central Time Zone (UTC-6), MyDate field shows up as 2:00AM on the SharePoint site.

I even removed the trailing Z from dateString and still got the same result.

var clientContext = new SP.ClientContext(_spPageContextInfo.siteAbsoluteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('test');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);

//Single line of text  
oListItem.set_item('Title', 'My New Item!');
//Format local date to UTC format 
var dateString=new Date("2023-07-02T00:00:00").toISOString();
dateString = dateString.replace(/Z$/, "");
oListItem.set_item('MyDate', dateString);

oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(
    function(){},
    function(){},
);

Are you able to get the correct result when your browser and SharePoint regional settings are in different time zones?

SvenSieverding

Bronze Contributor

Feb 07, 2023

If you include these libraries

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.40/moment-timezone.min.js"></script>

you can use moment to create UTC timestamps for midnight in every timezone

//Central
var dateString=moment.tz("2023-07-02T00:00", "America/Chicago").utc().format()
// dateString is 2023-07-02T05:00:00Z

//Pacific
var dateString=moment.tz("2023-07-02T00:00", "America/Los_Angeles").utc().format()
// dateString is 2023-07-02T07:00:00Z

If you use "2023-07-02T05:00:00Z" with the former code (Or exchange line 6 from the lower code with line 2 from the upper)

var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
//Single line of text  
oListItem.set_item('Title', 'Midnight Central');
//Format local date to UTC 
var dateString="2023-07-02T05:00:00Z"
oListItem.set_item('MyDate', dateString);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(
    function(){},
    function(){},
);

you create an item with a timestamp at midnight on a SharePoint site set to CST.

From every timezone.

Best Regards,
Sven

PS, but just for fun:

If you now apply the following JSON formatting to that date column

  {  
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
    "elmType": "div",  
    "txtContent": {  
      "operator": "toLocaleString()",  
      "operands": [  
        "@currentField"  
      ]  
    }  
  }

then the time will be still stored in the timezone of the site, but will be displayed in the browser's local timezone. So it would display a a "Pacific" time, even if the site is set to CST.