9

I'm trying to change date format of this component but I dont find any attribute (like ui:inputDate has) to change the date format.

 <lightning:input type="date" name="input8" label="Dates" value="2017-09-07" min="2017-09-05" max="2017-09-22" />

NOTE:Also I have used the new <lightning:inputField fieldName="date__c" /> for dates and actually works really nice but date format is a must I need to change.

This is an example of official lightning input here: LightningInput docs

The first one is Lightning input, the second one is ui:inputDate component.

I'm guessing it is changed by your Time Zone but actually, there is no change at all. enter image description here

Any ideas about how can I use it with the date format I want (DD/MM/YYYY)? Thanks

Improve this question
3
  • Your first code snippet is using type="text" instead of type="date". Did you try changing that?
    – Renato Oliveira
    Jun 20, 2018 at 13:31
  • Were you using this before Summer 18 was released, and was it displaying correctly using locales then? This might be a regression but the component is still in Beta, so you might struggle to get it logged as a bug. We are using lightning:input type="datetime-local", and in Spring '18 this displayed DD/MM/YYYY HH:mm for my UK locale, but has now changed to DD-Mon-YYYY HH:mm. I think I recall it correctly displaying MM/DD/YYYY for US locale, which is now Mon DD, YYYY. The benefit of Summer 18 for us has been the time picker now works.
    – James
    Jun 21, 2018 at 17:00
  • Yes, datepicker now works but date format is really weird point. Probably can work for you but I think we should have control under date format of the dates as I think is essential, just to don't change depending of Salesforce's decisions as maybe we're not thinking in the same date format. Anyway, I think we only can wait for this to be released as this is a must in every input type date and Salesforce should know it.
    – danigonlinea
    Jun 28, 2018 at 17:29

5 Answers 5

Reset to default
4

Updating answer : it need to be done with ui:input

<ui:inputDate aura:id="EndDateField" value="" displayDatePicker="true" format="MM/dd/yyyy"/>

formatting lightning input is not available. type="datetime-local" is not working seems a bug at salesforce or not yet implemented yet

Improve this answer
2
  • Are you sure about that? I can't find the format attribute on the docs. developer.salesforce.com/docs/component-library/bundle/…
    – Renato Oliveira
    Jun 20, 2018 at 13:29
  • Avijit, this is the component we are using because there is nothing we can use instead. Sad for this because I think this is the essential part of a component and should be included asap in the new lightning input date (if they want us to use it)
    – danigonlinea
    Jun 25, 2018 at 16:07
5

in Summer 19 SF add new attribute dateStyle for lightning:inpput date and datetime type fields link. in your case dateStyle="short" works for you

<lightning:input aura:id="dob" type="date" name="accdob" dateStyle="short" label="Date of Birth" value="{!v.object.DOB__c}" />
Improve this answer
1
  • Thanks, I will take a look on it.
    – danigonlinea
    May 8, 2019 at 8:25
4

There's not a way to specify the date format for date or datetime input fields lightning:input / lightning:inputField. This is meant to be controlled by the user's locale per the component library docs "The date and time formats are automatically validated against the user’s Salesforce locale format during the onblur event".

The formats you should expect to see for each locale are documented here: Supported Locales.

The incorrect format you are seeing is due to this known issue: Lightning:input $Locale date/time formats are inconsistent with the docs. As Avijit suggests, the current workaround is to use ui:inputDate, but hopefully Salesforce will fix this soon.

Improve this answer
2

We have to use lightning:input to format Date as MM/dd/yyyy. As components in the UI namespace are deprecated after release of API V_47.0. We can achieve this using attribute date-style

<lightning:input type="date" name="input1" label="Short Date"  date-style="short"  />

output=> 12/31/2021

<lightning:input type="date" name="input2" label="Medium Date" date-style="medium" />

output=> Dec 31, 2021

<lightning:input type="date" name="input3" label="Long Date"   date-style="long"   />

output=> December 31, 2021

Improve this answer
1

Use this attribute: dateStyle

Possible values are: short,medium,long

Improve this answer

You must log in to answer this question.

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