Skip to main content

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 

755e5bb182ac65bb60c1ffa2fce292e7d72326cc.png 

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. 
42af6a99721f1b273b624efa19b246e51bcf3c72.png

The body of the Snippet is as follows: 


var $ = skuid.$;var field = argumentsd0];<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.TEXTifield.mode](field, $.datepicker.formatDate( "mm/dd/yy", jsdate));<br>} else {&nbsp;<br>skuid.ui.fieldRendererstfield.metadata.displaytype]efield.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.TEXTsfield.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?

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

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.


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?  

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

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings