Hi experts,
               I have a requirement where the page should work in both all desktop based browsers and apple ipad. The page which i have created is working in all desktop based browsers.But its not working properly in ipad. The calendar is giving problem in ipad.

Below is the snapshot when io run my page in desktop browser.



Below is the screenshot when i run in one/one.app selecting apple ipad. I have encircled the calendar part which is appearing before clicking on From or To input fields in the snapshot.The calendar should appear when i click on From date near that field itself.



Below is the visualforce code and apex code which i have written.

Visualforce
 

<apex:page Controller="GVWS_GenerateReport" docType="html-5.0">


<apex:sectionHeader title="Reports" subtitle="Generate Report" id="sectionHeaderId"/>

 <apex:form id="ReportRegion">
  <apex:outputPanel id="msgPanel">
        <apex:pageMessages ></apex:pageMessages>
    </apex:outputPanel>
    <apex:pageblock id="pb">
    
        <apex:pageBlockSection id="SearchPanel" showHeader="true" columns="1">
           <!-- <apex:outputLabel value="Region"/>-->
           
            <apex:inputtext label="Region" id="rname" value="{!region}"/>
           <!-- <apex:outputLabel value="Country"/>
           <apex:outputLabel value="Close Date:">-->
              <apex:outputLabel style="color:#666666;font-weight:bold;font-size:11px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Close Date:
             <!-- <p font-color="Grey"><b>Close Date:</b></p>-->
             </apex:outputLabel> 
             
                <apex:inputField id="from" required="false" label="From:" value="{!dateFromOpp.CloseDate}"/>
                <apex:inputField id="to" required="false" label="To:" value="{!dateToOpp.CloseDate}"/>

             <!-- &nbsp;&nbsp; To &nbsp;&nbsp;<apex:input label="To" id="cdto" value="{!toDate}" type="date"/>-->
                
              
            <apex:inputtext label="Country" id="cname" value="{!country}" />
          
          <!-- <apex:outputLabel value="Close Date:"/>
           <br/>
               <apex:outputLabel value="From"/>
               <apex:input id="cdfrom" value="{!fromDate}" type="date"/>
               <apex:outputLabel value="To"/>
               <apex:input id="cdto" value="{!toDate}" type="date"/>
           -->
              
        </apex:pageBlockSection>      
        <apex:pageBlockButtons location="bottom">
            <apex:commandButton action="{!displayReport}"  value="Generate Report" ID="ENTER_BUTTON"/>
            <apex:actionStatus id="findOpportunityStatus">
                <apex:facet name="start">
                    <img src="{!$Resource.spin}" border="0" width = "20" height = "20"/>
                </apex:facet>
                <apex:facet name="stop">&nbsp;</apex:facet> 
            </apex:actionStatus>
        </apex:pageBlockButtons>
    </apex:pageblock>
    
    <apex:pageBlock id="pbb">
    
    <apex:actionStatus id="myStatusOpportunity">
            <apex:facet name="start">
                <img src="{!$Resource.spin}" border="0" width = "10" height = "10"/><b>...</b>
            </apex:facet>
            <apex:facet name="stop">&nbsp;</apex:facet> 
        </apex:actionStatus>

    
    <apex:pageBlockButtons location="top" id="pbbbuttons">
            <apex:commandButton rerender="pbb" action="{!firstPageOpportunity}"  value="|< First"  disabled="{!hasPreviousOpportunity}" status="myStatusOpportunity"></apex:commandButton>
            <apex:commandButton rerender="pbb" action="{!previousPageOpportunity}" value="<< Previous" disabled="{!hasPreviousOpportunity}" status="myStatusOpportunity"></apex:commandButton>
            <apex:commandButton rerender="pbb" action="{!nextPageOpportunity}" value="Next >>" disabled="{!hasNextOpportunity}" status="myStatusOpportunity"></apex:commandButton>
            <apex:commandButton rerender="pbb" action="{!lastPageOpportunity}" value="Last >|" disabled="{!hasNextOpportunity}" status="myStatusOpportunity"></apex:commandButton>
        </apex:pageBlockButtons>


    <apex:pageBlockTable value="{!opportunityRecords}" var="opp">  >  
        <apex:column headerValue="Opportunity Name">{!opp.name}
        </apex:column> 
        <apex:column headerValue="Opportunity Owner">{!opp.owner.name}</apex:column>
        <apex:column headerValue="Region">{!opp.GEBRegion__c}</apex:column>
        <apex:column headerValue="Country">{!opp.Country__c}</apex:column>
        <apex:column headerValue="Broker/Partner">{!opp.Broker__c}</apex:column>
        <apex:column headerValue="Estimated Premium(Converted)">{!opp.Total_Actual_Sale_Amount__c}</apex:column>
        <apex:column headerValue="Close date">{!opp.CloseDate}</apex:column>
        <apex:column headerValue="Stage">{!opp.StageName}</apex:column>
        <apex:column headerValue="Created stage">{!opp.Creation_Stage_Name__c}</apex:column>
        <apex:column headerValue="Account">{!opp.account.name}</apex:column>
        <apex:column headerValue="Parent Account">{!opp.account.parent.name}</apex:column>
        
    </apex:pageBlockTable>

    </apex:pageblock>

 </apex:form> 
 
</apex:page>

Part of Apex code 
 

public class GVWS_GenerateReport
{
  public String region{get;set;}
  public String country{get;set;}
  //public String closeDate{get;set;}
  //public String hasPrevious {get;set;}
  public Opportunity dateFromOpp {get;set;}
  public Opportunity dateToOpp {get;set;}
  public Date fromDate{get;set;}
  public Date toDate{get;set;}
  public List<Opportunity> opportunityRecords{get;set;}
  
   ApexPages.StandardSetController regionStandardSetController{get;set;}
  
  public GVWS_GenerateReport()
  {
    opportunityRecords = new list<Opportunity>();
    regionStandardSetController=new ApexPages.StandardSetController(new list<Opportunity>());
    dateFromOpp = new Opportunity();
    dateToOpp = new Opportunity();
  }
  
    //List<Opportunity> reportQuery=new List<Opportunity>();
   //reportQuery='SELECT Id,Name,Owner,Broker__c,GVWS_Region__c,GVWS_Country__c ,CloseDate,StageName FROM Opportunity';
   String reportQuery1 ='SELECT Id,Name,Owner.Name,Broker__c,Country__c,GEBRegion__c,CloseDate,StageName,Creation_Stage_Name__c,Total_Actual_Sale_Amount__c, account.name, account.parent.name FROM Opportunity WHERE StageName NOT IN (';
   String reportQuery2 = 'Ommitted';
   String reportQuery3 = 'Inforce';
   String reportQuery4 = 'Lost';
   String reportQuery5 = 'Declined';
   String reportQuery6 = ')';
   String reportQuery = reportQuery1+':'+'reportQuery2'+','+':'+'reportQuery3'+','+':'+'reportQuery4'+','+':'+'reportQuery5'+reportQuery6;
  
   
     
    
   public void displayReport()
 {
 
        Date todate = dateToOpp.CloseDate;
        Date fromdate = dateFromOpp.CloseDate;
        String checkQuery = reportQuery;
        String checkInput = reportQuery;
        
        if(region!= null && !region.equalsIgnoreCase(''))
        {
          
            checkQuery = checkQuery + 'and GEBRegion__c like :region';
            system.debug('***********1'+checkQuery);
        }
        
        if(country!= null && !country.equalsIgnoreCase(''))
        {
         
            checkQuery = checkQuery + ' '+'and Country__c like :country';
            system.debug('***********2'+checkQuery);
        }
        
        if((fromDate!= null)&&(toDate!=null))
        {
          checkQuery=checkQuery+' '+'and (closeDate>=:fromDate AND closeDate<= :toDate)';
          system.debug('************3'+checkQuery);
        }
        
        if(((fromDate!=null)&&(toDate==null))||((fromDate==null)&&(toDate!=null)))
        {
         ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.Info,'Please Enter value in both From and To search criteria'));
            opportunityRecords = new list<Opportunity>();
            return;
        }
        if(checkQuery.equals(checkInput)){
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.Info,'Please Enter value in at least one search criteria'));
            opportunityRecords = new list<Opportunity>();
            return;
        }
     
      
      //   system.debug('***********1'+checkQuery);
       
        
       
       regionStandardSetController=new ApexPages.StandardSetController(Database.getQueryLocator(checkQuery));
       
        opportunityRecords= regionStandardSetController.getRecords();
        
}

}

Please help me to write the code which will work in both visualforce and apex code.And my another question is how to make the page layout better in salesforce1(ipad).


Thanks,
Lahari