function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Matt SchetselaarMatt Schetselaar 

Lightning:input type date not displaying correctly

I have a Date field in a Lightning Component that is inside a table.  When you click on the field the table is all messed up with formatting.  I've found that this is due to the field being on a table and inheriting the styling from the table.  It's a stand alone component that works fine when it's not on a table from another component but I need it there.  Does anyone know how to clear the formating from the original table to get the date picker to look correct?

User-added image

This is part of the component that has the date field on it.  This component is called from another component that has a table. 
<div class="slds-p-horizontal--medium slds-grid slds-wrap">
   <lightning:input label="Subject" value="{!v.newTask.Subject}" class="slds-size--6-of-12 slds-p-horizontal--medium "/>

    <div class="slds-p-horizontal--medium slds-size--6-of-12">
         <lightning:input label="Due Date" type="date" value="{!v.newTask.ActivityDate}"  />
    </div>
</div>

Any suggestions or thoughts would be greatly appreciated.

Thanks!
Khan AnasKhan Anas (Salesforce Developers) 
Hi Matt,

I trust you are doing very well.

Please refer to the below link with a similar discussion which might help you further with the above issue.

https://salesforce.stackexchange.com/questions/222319/datepicker-not-displaying-properly-lightning-component

https://github.com/rapsacnz/DatePicker


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas
Matt SchetselaarMatt Schetselaar
I saw that discussion and have tried the datepicker app but was getting errors that I couldn't figure out.  I've also tried to clear the css myselft but with no luck.
Venky KambhamVenky Kambham
Please try this, it worked for me.
.THIS .slds-datepicker table {
    table-layout: fixed;
}
Neeraj Sethi 7Neeraj Sethi 7
Please try this, it worked for me.
https://apexcoder401.blogspot.com/2020/01/lightninginput-type-date-not-displaying.html
Venky KambhamVenky Kambham
Check this one,
https://vkambham.blogspot.com/2020/01/fix-date-picker-display-issue.html (https://vkambham.blogspot.com/2020/01/fix-date-picker-display-issue.html" target="_blank)