Adjust Display Format of Date and Date Time fields

  • 4
  • Question
  • Updated 2 months ago
  • Doesn't Need an Answer
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];
var value = arguments[1];
var jsdate = new Date();
//use skuid util to change SF date to JS date
jsdate = skuid.time.parseSFDate(value);
if (field.mode === 'read') { 
//uses jQuery UI Datepicker.formatDate tools
skuid.ui.fieldRenderers.TEXT[field.mode](field, $.datepicker.formatDate( "mm/dd/yy", jsdate));
} else { 


- 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.. 
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 45,128 Points 20k badge 2x thumb

Posted 5 years ago

  • 4
Photo of Tami Lust

Tami Lust

  • 6,196 Points 5k badge 2x thumb
Fantastic! Thank you.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 45,128 Points 20k badge 2x thumb
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.  
Photo of Jack Sanford

Jack Sanford, Champion

  • 10,176 Points 10k badge 2x thumb
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. 
Photo of Avinash


  • 1,726 Points 1k badge 2x thumb
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?
Photo of Pavithra


  • 520 Points 500 badge 2x thumb
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?
Photo of Jack Sanford

Jack Sanford, Champion

  • 10,176 Points 10k badge 2x thumb
Anyway to do this in Edit mode (without using the override field metadata)?
Photo of Scott


  • 2,732 Points 2k badge 2x thumb
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?
Photo of Victor Wong

Victor Wong

  • 156 Points 100 badge 2x thumb
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?
Photo of Bill McCullough

Bill McCullough, Champion

  • 13,702 Points 10k badge 2x thumb

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:



Photo of Elise


  • 100 Points 100 badge 2x thumb
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!
Photo of Elissa Bradley

Elissa Bradley

  • 2,138 Points 2k badge 2x thumb
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?