Adjust Display Format of Date and Date Time fields

  • 4
  • Question
  • Updated 1 year 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 { 
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); 
}

Notes: 

- 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

  • 44,006 Points 20k badge 2x thumb

Posted 4 years ago

  • 4
Photo of Tami Lust

Tami Lust

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

Rob Hatch, Official Rep

  • 44,006 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

  • 8,322 Points 5k 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

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 Jack Sanford

Jack Sanford, Champion

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

Scott

  • 2,722 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

  • 12,436 Points 10k badge 2x thumb
Victor,

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:

MONTH_NAME(TODAY())+" "+DAY(TODAY())+", "+YEAR(TODAY())

Thanks,

Bill