In this solution article we will get you more familiar with the custom date and time formats and show you where and how you can use them in ShortPoint Design Elements on your SharePoint pages.

TABLE OF CONTENTS

• What is a Custom Date and Time Format?
• Supported Custom Date and Time Formats
  • Most Common Custom Date and Time Formats
• How to Use Custom Date and Time Formats with ShortPoint Design Elements
  • Modifying Date and Time Format in the Data Placeholders
  • Modifying Date and Time Format in the ShortPoint Connections
    • Outlook Connections
    • News Connections

What is a Custom Date and Time Format?

Originally, the date and time values are stored as a number of seconds: 

• date formats are stored as the number of seconds since October 14, 1582; 
• time formats are stored as a number of seconds that represents a time interval (e.g., 09:00:00 is stored internally as 32400, which is 60 seconds x 60 minutes x 9 hours).

This is how the machines read the date and time.

The Custom Date and Time formats describe how the date/time values should be read, so that the end users will see it in a format they got used to. 03/16/2021 or 16-Mar-2021 10:20 am are the custom date and time formats examples. 

Custom Date and Time Formats help to display human-readable dates.

Supported Custom Date and Time Formats

ShortPoint supports all date and time formats from the Moment.js library.

Here's a list of commonly used date and time format tokens:

Note: 
To view the full list of date and time tokens, check the Moment.js documentation.

Most Common Custom Date and Time Formats

You may find the list of the most common date and time formats below:

How to Use Custom Date and Time Formats with ShortPoint Design Elements

You can use the date and time formats with both static and dynamically connected ShortPoint Design Elements. 

Setting the date and time format in ShortPoint is possible with:

• [%TODAY%] and [%Now%] data placeholders;
• Date/Time Format option (only supported for the ShortPoint Design Elements dynamically connected to the Outlook Calendars and News Connections).
  
  

Important: 
There is no need to add the Date and Time Format in the Use Cases for News and Graph API Connection Types. By doing that, you are only changing the request format. The returned values will not be affected, they are returned in ISO format. If you need to modify the format in News connections, use the Date/Time Format option; for Graph API - use the mapping function, enabling the Advanced Settings.

Modifying Date and Time Format in the Data Placeholders

Changing the date and time format is supported in the [%TODAY%] and [%Now%] data placeholders. 

Note: 
To get more familiar with the placeholders, check our solution article on How To Use Placeholders In ShortPoint Connections.

By default, TODAY and Now will be translated into ISO format. You can set the time format inside the parenthesis wrapping it in single quotes, like this:

• [%TODAY('MM/DD/YYYY')%] - this example will return the today's date in MM/DD/YYYY format (for instance, 03/16/2021);
• [%Now('MMMM Do YYYY, h:mm:ss a')%] - this example will return the current date and time in MMMM Do YYYY, h:mm:ss a format (for instance, March 16th 2021, 3:40:42 pm).

To change the date and time format for the Design Elements inside the placeholders, you need to do the following:

1. Open the Settings of the Design Element and switch to the tab with the text field:

In our example, we are using Panel Design Element, and the text field is located in the Settings tab, so we do not need to switch anywhere:

2. Update the date and time format in the placeholder

Important: 
Do not forget that you need to insert the custom date and time format inside the parenthesis wrapping it in single quotes. If you omit any of them, this will not work as expected.

3. Preview and Insert/Update the Design Element

You may preview your result and Insert/Update the Design Element, and then save the page.

Below is an example of the Panel Design Element, that uses the TODAY placeholder as a subtitle to display the tasks for the current date. 

Before	After
[%TODAY%] placeholder with no custom date and time format (ISO format)	[%TODAY('DD-MMM-YYYY')%] placeholder with the custom date and time format DD-MM-YYYY

We used the Simple Lists that are showing a list of tasks for the current date as the Panel's contents.

Modifying Date and Time Format in the ShortPoint Connections

Changing the date and time format is supported for the Outlook and News connections only.

In case you need to change the date and time format for the events of the SharePoint calendar, we recommend you changing your preferences in Delve - this action does not affect other members of the organization.

Note: 
Check out our solution article on SharePoint Setup: Modify SharePoint Regional Settings to Use Further in ShortPoint Design Elements to know more about it.

Important:
If you are using Events or Date Lists Design Elements, please keep in mind that the Start Date/End Date (for Events) and Date (for Date Lists) fields have a predefined format for displaying the dates: DD MMM.
Changing the date and time format will NOT affect its display, and the event items will still be shown like this:

Events Design Element	Date Lists Design Element

Outlook Connections

You can change the date and time format of the events start and end time for the Design Elements that are connected to the Outlook calendars. To modify the date and time format, please do the following steps:

1. Open the settings of the Design Element and navigate to the Connect tab. Enable Advanced Date Format option in the Date Format section:

Note: 

If you are modifying already connected Design Element, you will need to click Disconnect first:

2. Enter your preferred date and time format in the respective field and then click Connect:

Note: 
Do not forget to do the items mapping for the dynamically connected ShortPoint Design Elements. To get more familiar with items mapping, check our ShortPoint Connect: Basic Tutorial.

3. Preview and Insert/Update the Design Element

Below is the example of the Simple Lists Design Element, connected to the Outlook Calendar (My Events connection type):

Before	After
Date and Time are displayed according to the Account Settings	Date and Time are displayed according to the specified Date/Time Format (MMMM Do YYYY, h:mm:ss a)

News Connections

You can change the date and time format of the news items (date created and last modified time) for the Design Elements that are connected to the News. 

To modify the date and time format, please do the following steps:

1. Open the settings of the Design Element and navigate to the Connect tab:

2. Scroll down a bit and enter your preferred date and time format in the respective Date/Time Format field:

Note: 
If you are modifying already connected Design Element, you will need to click Disconnect first:

3. Click Connect:

4. Preview and Insert/Update the Design Element

Below is the example of the Image Lists Design Element, connected to the News (Site News connection type):

Before	After
Date and Time are displayed according to the Site Collection Regional Settings	Date and Time are displayed according to the specified Date/Time Format (MMMM Do YYYY, h:mm:ss a)

That's it. Happy formatting!

Related articles:

• SharePoint Setup: Modify SharePoint Regional Settings to Use Further in ShortPoint Design Elements
• How To Use Placeholders In ShortPoint Connections
• Introducing ShortPoint Events Design Element 
• Introducing ShortPoint Date Lists Design Element
• Connection Type: My Events (Outlook)
• Connection Type: Shared Events (Outlook)
• Connection Type: Group Events (Outlook)