4

I am currently wanting to output a date returned by my server-side controller to a Lightning component. I know that in VisualForce markup, you have the ability to format dates returned to the VisualForce page as mentioned in this post. However, I am not sure how to do this in a Lightning component? It seems you can perform locale formatting at a higher level as show here in the developer guide, but I am just wanting to format a single date output. The output type is a "Date" primitive type and not DateTime or I might use the DateTime.format() method in the server-side controller to do the formatting and do something like DateTime.format('MMM, d') which is the format that I need (i.e. Jul 05).

Has anyone had any experience doing this in the Lightning component? I have had some issues getting it to work correctly in the server-side controller. The date that is sent back from the server-side controller is a day behind the actual record date.

Thanks!

Improve this question

2 Answers 2

Reset to default
2

The ui:outputDate component has an attribute called langLocale which you can pass a country code to and an attribute called format that should follow the java.text.SimpleDateFormat interface. Thus, you should be able to do

<ui:outputDate format="MMM d" value={!v.date}/>
Improve this answer
2
  • Thanks! Is there anywhere in the Lightning Component Developer guide that shows those attributes? I wanted to make sure I didn't miss it.
    – Daniel Fuller
    Commented Jul 12, 2015 at 11:34
  • @DanielFuller - they're not in the dev guide, but they are in the reference, which you can find at YOUR-INSTANCE.lightning.force.com/auradocs/reference.app. This will list the various attributes supported for each component. However, this documentation sometimes references components that aren't public, so I pair it with the full aura reference: documentation.auraframework.org/auradocs#reference. This contains every component in aura, many of which aren't in Lightning yet.
    – Christian Carter
    Commented Jul 12, 2015 at 17:00
1

I have just created a custom date picker which will enable you to modify/tinker with the locale settings as you will have full control. Here is the blog post link.

This date picker is styled using the proper SLDS css, so will fit right into your SLDS Page or Lightning App.

I tried to eliminate any dependencies and would have fully succeeded except for a bug with the Locker Service (it seems to prevent some values being returned from string to date methods called on the localizationService object. Hence, it does require moment.js at present.

In the meantime, here is all the code on github: Datepicker

Of course, a gif too:

Datepicker gif

Let me know if you find any bugs.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .