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?


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:


Year
YY2-digit year17, 18, 19, 20, 21, 22 and 23
YYYY4-digit year2017, 2018, 2019, 2020, 2021, 2022 and 2023
Quarter
QQuarter of the year1, 2, 3, and 4
QoQuarter of the year with numeric ordinal contraction1st, 2nd, 3rd and 4th
Month
MMonth of the year1, 2, 3, 4 …10, 11 and 12
MoMonth of the year with numeric ordinal contraction1st, 2nd, 3rd, 4th …10th, 11th and 12th
MMMonth of the year: zero-padded, 2-digit month01, 02, 03, 04 …10, 11 and 12
MMMMonth of the year: 3 character monthJan, Feb, Mar, Apr …Oct, Nov and Dec
MMMMMonth of the year: full-length monthJanuary, February, March, April …October, November and December
Day
Day of the month 
DDay of the month1, 2, 3, 4 …28, 29, 30 and 31
DoDay of the month with numeric ordinal contraction1st, 2nd, 3rd, 4th …29th, 30th and 31st
DDDay of the month: zero-padded, 2-digit date (0 to 31)01, 02, 03, 04 …28, 29, 30 and 31
Day of the year
DDDDay of the year1, 2, 3, 4 …362, 363, 364 and 365
DDDoDay of the year with numeric ordinal contraction1st, 2nd, 3rd, 4th …362nd, 363rd, 364th and 365th
DDDDDay of the year: zero-padded, 3-digit date001, 002, 003, 004 …362, 363, 364 and 365
Day of the week 
(please note that Sunday is the 0th day of the week)
dDay of the week0, 1, 2, 3, 4, 5 and 6
doDay of the week with numeric ordinal contraction0th, 1st, 2nd, 3rd, 4th, 5th and 6th
ddDay of the week: 2 character daySu, Mo, Tu, We, Th, Fr, and Sa
dddDay of the week: 3 character daySun, Mon, Tue, Wed, Thu, Fri and Sat
ddddDay of the week: full-length daySunday, Monday, Tuesday, Wednesday, Thursday, Friday and Saturday
Hours

Hour (23 hrs)

HHour of day from 0-240, 1, 2, 3, 4 …19, 20, 21, 22 and 23
HHHour of day from 0-24, zero-padded00, 01, 02, 03, 04 …19, 20, 21, 22 and 23

Hour (12 hrs)

hHour of the day on 12-hour clock1, 2, 3, 4 …10, 11 and 12
hhHour of day on 12-hour clock, zero-padded01, 02, 03, 04 …10, 11 and 12
Minutes
mMinute0, 1, 2, 4 …54, 55, 55, 57, 58 and 59
mmMinute, zero-padded00, 01, 02, 04 …54, 55, 56, 57, 58 and 59
Seconds
sSecond0, 1, 2, 4 …54, 55, 55, 57, 58 and 59
ssSecond, zero-padded00, 01, 02, 04 …54, 55, 56, 57, 58 and 59

Milliseconds

SSSMilliseconds000, 001, 002, 003, 004 ... 998 and 999
Ante or Post Meridiem
AUppercase formatAM, PM
aLowercase formatam, pm
Timezone offset
(please note, that if the time zone is not present, it will be local time, otherwise the date will be set to UTC)
ZColon separator between hours and minutes-07:00 -06:00 ... +06:00 +07:00
ZZNo colon separator between hours and minutes-0700 -0600 ... +0600 +0700


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:


Date and time formatExample
Date and time
YYYY-MM-DD hh:mm:ss a2021-03-16 03:40:42 pm
MMMM Do YYYY, h:mm:ss aMarch 16th 2021, 3:40:42 pm
Do MMMM YYYY, h:mm:ss a16th March 2021, 3:40:42 pm
Date only
YYYY-MM-DD2021-03-16
M/D/YYYY 3/16/2021 
D/M/YYYY16/3/2021
MM/DD/YYYY03/16/2021
DD/MM/YYYY16/03/2021
MMMM Do, YYYYMarch 16th, 2021
Do MMMM, YYYY16th March, 2021

MMM Do YY

Mar 16th 21
Do MMM YY16th Mar 21
dddd, MMMM Do YYYYWednesday, March 16th 2021
dddd, Do MMMM YYYYWednesday, 16th March 2021
Time only

HH:mm

15:40
HH:mm:ss15:40:42
h:mma3:40pm
h:mm A3:40 AM

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).

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:

  • Option 1 (for the dynamic placeholders in the Connections):

Switch to the Connect tab and locate your TODAY or Now placeholder (in the Use Cases or in the connection URL):


Note: By changing the date and time format in the Use Cases or the connection URL, you are only changing the request format. The returned values will not be affected.

  • Option 2 (for the placeholders you use in the text fields):

Switch to the tab with the text field (in our example, it's the Settings tab):




2. Update the date and time format in the placeholder

  • Option 1 (for the dynamic placeholders in the Connections):



  • Option 2 (for the placeholders you use in the text fields):


 

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.


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

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. 


BeforeAfter 
[%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 


Note: 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 for the ShortPoint Outlook Connections


Changing the date and time format is currently supported for the Outlook 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: 
Keep in mind that the Start Date/End Date (for Events Design Element) and Date (for Date Lists Design Element) fields have a predefined format for displaying the dates: DD MMM.
Changing the date and time format will NOT affect its display, and the events items will still be shown like this:


Events Design ElementDate Lists Design Element



To change the date and time format for the Design Elements connected to Outlook calendars, you need to do the following:


1. Open the settings of the Design Element you are connecting to the Outlook calendar 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

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


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


BeforeAfter
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)



That's it. Happy formatting!


Related articles: