Datepicker not displaying properly lightning component

Question

I have following lightning component.

sp.cmp

<aura:component controller="Pledge_Mgmt_Controller">

  <aura:attribute name="paymentList" type="Map[]"  />


  <div>
      <div class="slds-p-vertical_small">

          <h4 class="slds-section__title slds-theme_shade">
              <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Payments to be created</span>
          </h4>
      </div>

      <div>
          <table role="grid" class="">
              <thead>
                  <tr class="slds-text-title_caps">
                      <th scope="col"  style="width: 10%;">
                          <div class="slds-truncate">Payment Number</div>
                      </th>
                      <th scope="col">
                          <div class="slds-truncate">Schedule Date</div>
                      </th>   
                      <th scope="col">
                          <div class="slds-truncate">Payment Amount</div>
                      </th>              
                  </tr>
              </thead>


              <tbody>

                  <aura:iteration items="{!v.paymentList}"  var="paym">
                      <aura:if isTrue="{! v.paymentList.length > 0}">
                          <c:spl aura:id="itemForm" 
                                 payment="{!paym}"
                                 serialNumber="{!paym.pIndex}"/> 
                      </aura:if>
                  </aura:iteration>
              </tbody>
          </table>

      </div>

      <div class="slds-align_absolute-center slds-p-vertical_small">
          <lightning:button label="Create Payment" title="Create Payment" onclick="{! c.createPayment }"/>
      </div>
  </div>

spl.cmp

<aura:component >
    <aura:attribute name="payment" type="Map" default="{}" />

    <tr>
        <td class="slds-truncate" style="width: 10%;">            
            <ui:outputText value="{!v.payment.pIndex}" 
                           aura:id="pNumber" />
        </td>

        <td>
            <lightning:input aura:id="pScheduleDate" 
                             type="date"
                             label="" 
                             name="date"
                             variant="label-hidden"
                             value="{!v.payment.pScheduleDate}"
                             onchange="{!c.addScheduledDate}"/>
        </td>

        <td>
            <lightning:input aura:id="pNumber"
                             type="number" 
                             name="currencyVal" 
                             label="" 
                             formatter="currency" 
                             step="0.01" 
                             variant="label-hidden"
                             value="{!v.payment.pAmount}" />
        </td>
    </tr>
</aura:component>

When I add css class in the table,

<table role="grid" class="slds-table slds-table_bordered">

date picker is not showing properly and displayed as follows

but when I remove the class from the table

<table role="grid" class="">

it is showing date picker in correct format but my table is messed up

Can anybody give me a solution so that I can show both table and date picker with correct styles? Any help is greatly appreciated. Thanks in advance

Answer 1

The problem occurs because the datepicker is essentially a table inside a table. It's inheriting all the styles of the outer table.

You basically need to reset all the styles for the picker and or explicitly define them. You maybe able to define the style resets outside of the picker in your host component with some experimentation (clearly the styles are leaking already)

If you have trouble doing that, you can use my picker on github here where I've already fixed this issue (I had the same problem as you a while back.)

For reference, the key css that you need to apply to the picker is this:

.THIS.clear-user-agent-styles table,
.THIS.clear-user-agent-styles thead,
.THIS.clear-user-agent-styles tbody,
.THIS.clear-user-agent-styles tfoot,
.THIS.clear-user-agent-styles tr,
.THIS.clear-user-agent-styles th,
.THIS.clear-user-agent-styles td {
  font-weight: inherit;
}

.THIS .datepicker-table {
  border-color: rgb(128,128,128);
  border-collapse: collapse;
  box-sizing: border-box;
  font-family: "Salesforce Sans",Arial,sans-serif;
  height: auto;
  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-vertical-spacing: 0px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.THIS .datepicker-table table {
  color: rgb(22,50,92);
  display: table;
  line-height: 18px;
  width: 100%;
}

.THIS .datepicker-table thead tr {
  border-bottom-color: rgb(240, 241, 242);
  display: table-row;
  font-size: 12px;
  line-height: 18px;
  vertical-align: middle;
  width: auto;
}

.THIS .datepicker-table tbody {
  border-collapse: collapse;
  box-sizing: border-box;
  color: rgb(22, 50, 92);
  display: table-row-group;
  line-height: 18px;
  vertical-align: middle;
  width: auto;
}

.THIS .datepicker-table tbody tr {
  display: table-row;
}

.THIS .datepicker-table tbody tr td {
  display: table-cell;
  line-height: 18px;
  padding: .25rem;
  text-align: center;
  vertical-align: middle;
  width: auto;
  border: none;
}

As you can see I have wrapped my picker in a div with the class clear-user-agent-styles and datepicker-table

Heres's where wrapped my picker in the clear styles div:

<div aura:id="grid" id="datepicker-dropdown" class="slds-datepicker slds-dropdown slds-dropdown_left slds-hide datepicker-display-table clear-user-agent-styles "

and Here's where I defined a div of class datepicker-table

<table aura:id="maintable" class="datepicker__month datepicker-table datepicker-table" role="grid" aria-labelledby="month">

As you can see, it's much easier to apply this to a class you have full control over (such as my picker) than a built in one.

Good luck.

Answer 2

I just substituted lightning:input for ui:inputDate. The UI issue disappeared

Answer 3

Your datepicker should not be placed inside your table, but instead should be aligned above the area you'd like to show it. So if you invoke it from a certain table cell, you should use JS to overlay the datepicker right there. But not place it INSIDE the table's DOM. Does that make sense?

Answer 4

Please try this, it worked for me.

.THIS .slds-datepicker table {
    table-layout: fixed;
}

Answer 5

Apply below css to your style class of lightning component. will solve your issue I have also faced this issue once.

.THIS .slds-datepicker .slds-day {
    display : contents;
    position: absolute;
    z-index: 7000;
    left: -0.71875px;    
}