I have a field with date/time dataType and using that field in VF page, initially date picker was not visible then changed standard stylesheet = "true" (is this the only option) and everything works fine in system view BUT in SF1, datepicker appears in a random manner
<ui:inputDate> generates a few elements when it gets rendered. The ones we're concerned with are an <input> element, and an <a> element that is used for your icon.
The CSS class .slds-input is applied to the <input> element and has the property width: 100% which is causing your <a> element to wrap because it comes after the <input> element in your DOM. There are a few ways to get around this:
white-space: nowrap to the div that contains your <ui:inputDate> element.I'm no CSS/HTML wizard, there may be some better solutions here, but your problem is definitely the <a> element wrapping.
Here is what I created. The lookup field is not relevant, just do not use slds class for the lookup field. It will look weird, but it will save you dev time.
(I have created a custom lookup component for internal use but not sure if it is worth the time for you).
The first section is the list views that you can select. This takes the list views you already have and allow you to edit from here. I believe the limit is 50 per page. There is a way around it, but you should look at Salesforce docs on list controllers.
<apex:form id="theForm">
<apex:selectList id="list3" value="{!filterid}" size="1">
<apex:actionFunction name="refreshMyPanel2" reRender="theForm" />
<apex:actionSupport event="onchange" rerender="theForm"/>
<apex:selectOptions value="{!listviewoptions}"/>
<br></br>
</apex:selectList>
<apex:actionSupport event="onclick"
rerender="error,theForm,buttons"/>
<apex:panelGrid columns="8" id="buttons">
<apex:commandButton reRender="error,theForm,buttons" action="
{!Save}" value="Save"/>
<apex:commandButton reRender="error,theForm,buttons" action="
{!Cancel}" value="Cancel"/>
<apex:inputHidden />
<apex:commandButton reRender="error,theForm,buttons" disabled="
{!!hasprevious}" action="{!First}" value="First"/>
<apex:commandButton reRender="error,theForm,buttons" disabled="
{!!hasprevious}" action="{!Previous}" value="Previous"/>
<apex:commandButton reRender="error,theForm,buttons" disabled="
{!!hasnext}" action="{!Next}" value="Next"/>
<apex:commandButton reRender="error,theForm,buttons" disabled="
{!!hasnext}" action="{!Last}" value="Last"/>
<!-- Pagination -->
<table style="width: 100%" id="table1"><tr id="row">
<td>
Page: <apex:outputText value=" {!PageNumber} of {! CEILING(ResultSize /
PageSize) }"/>
</td>
<td align="center">
<!-- Previous page -->
<!-- Next page -->
</td>
<td align="right">
<!-- Records per page -->
</td>
</tr></table>
</apex:panelGrid>
The next section is the page block with columns. Yes, I know this is not recommended in Lightning. It affects responsiveness for mobile, but it works.
<apex:pageBlock id="thePageBlock" mode="edit">
<apex:pageBlockTable value="{!records}" var="record" id="acct">
<apex:column width="100x">
<apex:outputField value="{!record.Account.Name}"
id="acctname" />
<apex:facet name="header">Account Name</apex:facet>
</apex:column>
<apex:column width="100px">
<apex:outputField value="{!record.Name}" id="AccountTypeDOM"
/>
<apex:facet name="header">Contact Name</apex:facet>
</apex:column>
<apex:column width="100px">
<apex:outputField value="{!record.Phone}"
id="phone" />
<apex:facet name="header">Phone</apex:facet>
</apex:column>
<apex:column width="60px">
<apex:outputField value="{!record.Email}"
id="email" />
<apex:facet name="header">Email</apex:facet>
</apex:column>
<apex:column width="100px">
<apex:outputField value="
{!record.Accounts_Handled_by_Rep__c}"
id="handled" />
<apex:facet name="header">Accounts Handled</apex:facet>
</apex:column>
<apex:column width="25px" id="col">
<apex:outputField value="{!record.Log_Call__c}"
id="call" />
<apex:facet name="header">Log Call</apex:facet>
</apex:column>
<apex:column >
<apex:outputField value="{!record.Comments_Feedback__c}"
id="comments" />
<apex:facet name="header">Comments</apex:facet>
</apex:column>
<apex:column style="display:none;">
<apex:outputField value="{!record.Id}"
id="id" />
<apex:facet name="header">Id</apex:facet>
</apex:column>
<apex:inlineEditSupport showOnEdit="saveButton,cancelButton"
event="onclick" hideOnEdit="editButton" />
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
and of course you will need a list controller, below is contact, you will need to make into opps.
<apex:page standardController="Contact" recordSetVar="records" id="thePage"
sidebar="true">
And then you make sure your VF Page is okay for lightning, then add to lightning page.
As always, you need to update your objects and custom fields. You can use the slds for this page, except for the lookup field. Like I said, that field is a bit more tricky because it is actually 5 fields and some javascript.
I would not put this in front a lot of users because it will not look as clean because of the styling and the lack of responsiveness but it works.
Best Answer
You have two options here.
This option is only good if you are familiar with Javascript as LDS only provides the view not that action. In Visualforce you will be writing your own Javascript functions to control the behavior of your page and events. Or you can use a third party library like Appiphony.js see here
If you really want your page to work in LEX I would recommend option number 2. If you really want your page to be future proof I would make it out of Lightning Components and expose it in Classic via Lightning Out. The learning curve is definitely steeper here but worth it in the long run.