Adjust Display Format of Date and Date Time fields

A question came by email this week that merits broader distribution. 

I have a date/time field.  Is there a method to show it as date only on one of my screens?

Good question.   Here’s a step by step guide.

Step 1.  Drag your date or datetime field into your Skuid page.
- Change the Field Renderer type to “Custom (run a Snippet)”
- Give the Snippet a name.  I used “DateOnly”   We’ll use that name in step 2 


Step 2.  Create a Javascript Resource.  Open the Resources tab and add a Javascript Item. 
- The Resource Location should be "In-Line (Snippet). 
- The Name should match what you used in step 1. 

The body of the Snippet is as follows:

var $ = skuid.$;var field = arguments[0];<br>var value = arguments[1];<br>var jsdate = new Date();<br>//use skuid util to change SF date to JS date<br>jsdate = skuid.time.parseSFDate(value);<br>if (field.mode === 'read') {&nbsp;<br>//uses jQuery UI Datepicker.formatDate tools<br>skuid.ui.fieldRenderers.TEXT[field.mode](field, $.datepicker.formatDate( "mm/dd/yy", jsdate));<br>} else {&nbsp;<br>skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);&nbsp;<br>}


- You can adjust the formatDate values to use any of the options provided by the jQuery datepicker widget.  See documentation. 
- If the field is read only replace the whole “If  - else” block with this single line of code. 

skuid.ui.fieldRenderers.TEXT[field.mode](field, $.datepicker.formatDate( "mm/dd/yy", jsdate));

This should do what you want… 

Fantastic! Thank you.

Actually now there is a MUCH SIMPLER METHOD. 

When you add the date time field to your model select the “overwrite metadata” option and you will be presented with an initial set of formatting option.  
-  To get a standard date - choose the date type.  
-  To get ANY OTHER date format you can think of make it a formula and use the FORMAT_DATE function.   Just note that the date format string needs to be in quotes.  That’s not in the tutorial and not exactly obvious.   I really needed a date formatted:   MONDAY July 29, 98     Totally easy.  

The old method is still useful. In one case I have date/time that will render sometimes as date/time and sometimes as just a date in the same field editor. 

Anyway to do this in Edit mode (without using the override field metadata)?

Hey Rob - Having some trouble with this…
I’m trying to output the ReadOnly field {{CreatedDate}} in the format “mm/dd/yy”.

Am I doing something terribly wrong here?

Hi Rob, I have a question. By selecting the “overwrite metadata” option , i am able to display the the way i wanted. But when i export the field in to a CSV file I am seeing the Complete Date format (2016-10-06T04:15:06.000+0000) being populated. Is there anyway to show the same date format like i am seeing on the Console?

When i overwrite the field metadata, it changes the date to the day after. ex. 8/9/2017 6:00 PM -> 8/10/2017. Is there any way to only use the date that is displayed instead of the time zone that it is converting to?


As long as you don’t need a date field and just want to display the date, you can use a Model UI formula field to parse the month, day, year from the date and display this as text.  Here is a sample formula:




Hello!  Did anyone ever run figure the display out for a Chart component?  Overriding the field metadata for the CreatedDate field I’m referencing works in a table, etc. but the in a Chart still shows the date/time format.  Thank you in advance!

The “overwrite metadata” did not seem to be working. I want to show the Date format as mm/dd/yy in edit mode. Is there a way to show this in edit mode?

Hi folks!  Similar question.  We are trying to merge dates into a URL.  We have a UI only field that allows a user to enter a date, then we are trying to pass that date to a report filter using merge syntax.  When we hardcode the dates in the URL (which we display in a template field), this works well.


But, when we try to use merge syntax, there seems to be spaces coming in with the dates.  The dates are passed with format mm/dd/yyyy.  I think we can solve the problem by passing them in with format yyyy-mm-dd as we did in the hardcoded example above.  Any ideas about how we can do this?  

Figured this out - just needed to use triple curly braces in my merge syntax: