Adjust Display Format of Date and Date Time fields

Questions
1

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>}


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… 

2

Fantastic! Thank you.

3

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.  

4

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. 

5

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

6

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?

7

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?

8

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?

9

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

10

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!

11

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?

12

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.

https://org–partial.lightning.force.com/lightning/r/Report/00O19000000f8r1EAA/view?fv1=2019-12-01&fv2=2019-12-02

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?  

13

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

https://org–partial.lightning.force.com/lightning/r/Report/00O19000000f8r1EAA/view?fv1={{{StartDate}}}&fv2={{{EndDate}}}