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
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 | ||
YY | 2-digit year | 17, 18, 19, 20, 21, 22 and 23 |
YYYY | 4-digit year | 2017, 2018, 2019, 2020, 2021, 2022 and 2023 |
Quarter | ||
Q | Quarter of the year | 1, 2, 3, and 4 |
Qo | Quarter of the year with numeric ordinal contraction | 1st, 2nd, 3rd and 4th |
Month | ||
M | Month of the year | 1, 2, 3, 4 …10, 11 and 12 |
Mo | Month of the year with numeric ordinal contraction | 1st, 2nd, 3rd, 4th …10th, 11th and 12th |
MM | Month of the year: zero-padded, 2-digit month | 01, 02, 03, 04 …10, 11 and 12 |
MMM | Month of the year: 3 character month | Jan, Feb, Mar, Apr …Oct, Nov and Dec |
MMMM | Month of the year: full-length month | January, February, March, April …October, November and December |
Day | ||
Day of the month | ||
D | Day of the month | 1, 2, 3, 4 …28, 29, 30 and 31 |
Do | Day of the month with numeric ordinal contraction | 1st, 2nd, 3rd, 4th …29th, 30th and 31st |
DD | Day of the month: zero-padded, 2-digit date (0 to 31) | 01, 02, 03, 04 …28, 29, 30 and 31 |
Day of the year | ||
DDD | Day of the year | 1, 2, 3, 4 …362, 363, 364 and 365 |
DDDo | Day of the year with numeric ordinal contraction | 1st, 2nd, 3rd, 4th …362nd, 363rd, 364th and 365th |
DDDD | Day of the year: zero-padded, 3-digit date | 001, 002, 003, 004 …362, 363, 364 and 365 |
Day of the week (please note that Sunday is the 0th day of the week) | ||
d | Day of the week | 0, 1, 2, 3, 4, 5 and 6 |
do | Day of the week with numeric ordinal contraction | 0th, 1st, 2nd, 3rd, 4th, 5th and 6th |
dd | Day of the week: 2 character day | Su, Mo, Tu, We, Th, Fr, and Sa |
ddd | Day of the week: 3 character day | Sun, Mon, Tue, Wed, Thu, Fri and Sat |
dddd | Day of the week: full-length day | Sunday, Monday, Tuesday, Wednesday, Thursday, Friday and Saturday |
Hours | ||
Hour (23 hrs) | ||
H | Hour of day from 0-24 | 0, 1, 2, 3, 4 …19, 20, 21, 22 and 23 |
HH | Hour of day from 0-24, zero-padded | 00, 01, 02, 03, 04 …19, 20, 21, 22 and 23 |
Hour (12 hrs) | ||
h | Hour of the day on 12-hour clock | 1, 2, 3, 4 …10, 11 and 12 |
hh | Hour of day on 12-hour clock, zero-padded | 01, 02, 03, 04 …10, 11 and 12 |
Minutes | ||
m | Minute | 0, 1, 2, 4 …54, 55, 55, 57, 58 and 59 |
mm | Minute, zero-padded | 00, 01, 02, 04 …54, 55, 56, 57, 58 and 59 |
Seconds | ||
s | Second | 0, 1, 2, 4 …54, 55, 55, 57, 58 and 59 |
ss | Second, zero-padded | 00, 01, 02, 04 …54, 55, 56, 57, 58 and 59 |
Milliseconds | ||
SSS | Milliseconds | 000, 001, 002, 003, 004 ... 998 and 999 |
Ante or Post Meridiem | ||
A | Uppercase format | AM, PM |
a | Lowercase format | am, 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) | ||
Z | Colon separator between hours and minutes | -07:00 -06:00 ... +06:00 +07:00 |
ZZ | No 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 format | Example |
Date and time | |
YYYY-MM-DD hh:mm:ss a | 2021-03-16 03:40:42 pm |
MMMM Do YYYY, h:mm:ss a | March 16th 2021, 3:40:42 pm |
Do MMMM YYYY, h:mm:ss a | 16th March 2021, 3:40:42 pm |
Date only | |
YYYY-MM-DD | 2021-03-16 |
M/D/YYYY | 3/16/2021 |
D/M/YYYY | 16/3/2021 |
MM/DD/YYYY | 03/16/2021 |
DD/MM/YYYY | 16/03/2021 |
MMMM Do, YYYY | March 16th, 2021 |
Do MMMM, YYYY | 16th March, 2021 |
MMM Do YY | Mar 16th 21 |
Do MMM YY | 16th Mar 21 |
dddd, MMMM Do YYYY | Wednesday, March 16th 2021 |
dddd, Do MMMM YYYY | Wednesday, 16th March 2021 |
Time only | |
HH:mm | 15:40 |
HH:mm:ss | 15:40:42 |
h:mma | 3:40pm |
h:mm A | 3: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 options available in ShortPoint Connect.
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:
Step 1: Edit the Design Element
- Edit the SharePoint page.
- Select the ShortPoint web part.
- Click Edit Properties.
- Select the EasyPass tag of the Design Element where you want to display a Date and Time using a placeholder.
- Click the cogwheel icon. The Design Element settings window will open.
Note: If you haven't added a Design Element yet, you can simply insert one by clicking the Add Design Element plus icon. Learn more from our article on How to Insert a Design Element in Live Mode.
Step 2: Add custom Date and Time placeholder
- In the Content tab, add the custom Date and Time placeholder in the field where you want it displayed.
In our example, we are using the Panel Design Element. We want to show the Date and Time today in the Panel Subtitle field.
We will use the TODAY placeholder with the custom date and time format MM/DD/YYY.
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.
Step 3: Apply changes and save
- Press the green checkmark button to apply your changes.
- Hit Save.
Below is an example of the Panel Design Element using the TODAY placeholder.
Before | After |
[%TODAY%] placeholder with no custom date and time format (ISO format) | [%TODAY('MM/DD/YYYY')%] placeholder with the custom date and time format MM/DD/YYYY |
![]() | ![]() |
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 |
![]() | ![]() |
Modifying Date and Time Format in the ShortPoint Connections
Changing the date and time format is supported for the Outlook, News, and Microsoft Graph API connections only.
In case you need to change the date and time format for the events of the SharePoint calendar, we recommend 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.
Outlook Connections
You can customize the date and time format for event start and end times in Design Elements that display Outlook calendars. This applies to calendars connected via My Events, Shared Events, or Group Events connection types. To modify the date and time format:
Step 1: Edit the ShortPoint web part
- Edit the SharePoint page.
- Select the ShortPoint web part.
- Click Edit Properties.
This will open the ShortPoint Live Mode editing interface.
Step 2: Edit the Design Element in Grid Mode
- Switch to Grid Mode. ShortPoint Connect is currently only available in Grid Mode.
- Navigate to the Design Element where you want to add your custom date and time formats.
- Click the cogwheel icon to open the settings window.
Note: If you haven't added a Design Element yet, you can simply insert one by clicking the Add Design Element plus icon before switching to Grid Mode. Learn more from our article on How to Insert a Design Element in Live Mode.
Step 3: Open the advanced date format fields
- Go to the Connect tab,
- Select any of the Outlook connection types (My Events, Shared Events, or Group Events).
- Complete the required connection fields.
- Scroll down to the Date Format section.
- Switch on the Enable Advanced Date Format toggle. This will open new fields to customize date and time formats.
Note: If you are modifying already connected Design Element, you will need to click Disconnect first:
Step 4: Input your custom date and time format and connect
- In the Date/Time Format field, enter the custom date and time format you prefer to use.
- (Optional) Configure other connection settings as needed.
- Hit Connect.
Step 5: Map items to display and apply changes
- Switch to the Items tab and check that you have mapped the properties that you want to display on the page.
- Hit Preview to see how the results will be displayed.
- Insert or Update your Design Element.
- Do not forget to save your changes.
Note: To get more familiar with items mapping, check our ShortPoint Connect: Basic Tutorial.
Below is an 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 and Microsoft Graph API Connections
You can customize the date and time format of news items (date created and last modified time) for Design Elements connected using any of the News connection types - Site News, Hub News, or Org News. This same custom date and time formatting option is also available for Microsoft Graph API connection results.
To modify the date and time format, please do the following steps:
Step 1: Edit the ShortPoint web part
- Edit the SharePoint page.
- Select the ShortPoint web part.
- Click Edit Properties.
This will open the ShortPoint Live Mode editing interface.
Step 2: Edit the Design Element in Grid Mode
- Switch to Grid Mode. ShortPoint Connect is currently only available in Grid Mode.
- Navigate to the Design Element where you want to add your custom date and time formats.
- Click the cogwheel icon to open the settings window.
Note: If you haven't added a Design Element yet, you can simply insert one by clicking the Add Design Element plus icon before switching to Grid Mode. Learn more from our article on How to Insert a Design Element in Live Mode.
Step 3: Input your custom date and time format
- Go to the Connect tab,
- Select any of the News (Site News, Hub News, or Org News) or the Microsoft Graph API
connection types. - Complete the required connection fields.
- Scroll down to the Date/Time Format field.
- Replace the default date and time format with the format that you want to use.
- (Optional) Configure other connection settings as needed.
- Hit Connect.
Note: If you are modifying already connected Design Element, you will need to click Disconnect first:
Step 4: Map items to display and apply changes
- Switch to the Items tab and check that you have mapped the properties that you want to display on the page.
- Hit Preview to see how the results will be displayed.
- Insert or Update your Design Element.
- Do not forget to save your changes.
Note: To get more familiar with items mapping, check our ShortPoint Connect: Basic Tutorial.
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. You now know how to apply custom date and time formats in ShortPoint.
Related articles:
- SharePoint Setup: Modify SharePoint Regional Settings to Use Further in ShortPoint Design Elements
- How To Use Placeholders In ShortPoint Connections
- Connection Type: My Events (Outlook)
- Connection Type: Shared Events (Outlook)
- Connection Type: Group Events (Outlook)
- Connection Type: Site News
- Connection Type: Hub News
- Connection Type: Org News
- Connection Type: Microsoft Graph API