Lightning Input DateFormat – Change Date Format in lightning:input (Summer ’18)

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.

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

Best Answer

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

Related Solutions

[SalesForce] How to hide ‘x’ on lightning:input

This field is actually an Html5 input type="date"

if you would like a different behavior, I would suggest you add the html5 input field type directly within your iteration:

<input type="date"/>

and scoping the css accordingly, with the webkit-clear-button in the components style:

.THIS::-webkit-clear-button {

    display: none; 
    -webkit-appearance: none; 
}

should work.

Lightning Input – Change ‘Upload Files’ Text in lightning:input Type=”file”

Try adding these lines to your Lightning Style:

/* remove the "or drop files" label from the right of the lightning:input type file */
.THIS .slds-file-selector__dropzone .slds-file-selector__text{
    display: none;
}

/* remove the "Upload Files" text from the button of the lightning:input type file */
.THIS .slds-file-selector__dropzone .slds-file-selector__button{
    font-size: 0;
}

/* insert the text "New Exam" into the button of the lightning:input type file */
.THIS .slds-file-selector__dropzone .slds-file-selector__button:after{
    content: 'New Exam';
    font-size: .8125rem;
    color: rgba(27, 82, 151, 1.0);
}

Best Answer

Related Solutions

[SalesForce] How to hide ‘x’ on lightning:input

Lightning Input – Change ‘Upload Files’ Text in lightning:input Type=”file”

Related Topic