DatePicker in visualforce which will run in all browser

Hi experts,

I am a newBie .I have a requirement where i have to select a range of date in visualforce page.Based on that range i have to fetch the details.I have used which is working fine.But this is not displaying a datepicker when i run in IE browser.It only works in chrome.

What coding approach i have to follow.Please help me in solving this.

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

Visualforce page

<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="2">
           <!-- <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">CloseDate:
             <!-- <p font-color="Grey"><b>Close Date:</b></p>-->
              <br/>
              From &nbsp;&nbsp;<apex:input label="From" id="cdfrom" value="{!fromDate}" type="date"/>
              &nbsp;&nbsp; To &nbsp;&nbsp;<apex:input label="To" id="cdto" value="{!toDate}" type="date"/>
              </apex:outputLabel> 
              
            <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:pageBlockTable>

    </apex:pageblock>

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

Apex class

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 Date from{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>());
  
  }
  
    //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 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()
 {
        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();
        
}
  
    public PageReference firstPageOpportunity() {
        regionStandardSetController.first();
        opportunityRecords = regionStandardSetController.getRecords();
        hasPreviousOpportunity = !regionStandardSetController.getHasPrevious();
        hasNextOpportunity= !regionStandardSetController.getHasNext();
        
        return null;
    }
    
    /*
        Shows last set of records in account search result.
    */
    public PageReference lastPageOpportunity() {
        regionStandardSetController.last();
        opportunityRecords = regionStandardSetController.getRecords();
        hasPreviousOpportunity= !regionStandardSetController.getHasPrevious();
        hasNextOpportunity= !regionStandardSetController.getHasNext();
        
        return null;
    }
    
    /*
        Shows next set of records in account search result.
    */
    public PageReference nextPageOpportunity() {
        regionStandardSetController.next();
        opportunityRecords = regionStandardSetController.getRecords();
        hasPreviousOpportunity= !regionStandardSetController.getHasPrevious();
        hasNextOpportunity= !regionStandardSetController.getHasNext();
        
        return null;
    }
    
    /*
        Shows previous set of records in account search result.
    */
   public PageReference previousPageOpportunity() {
        regionStandardSetController.previous();
        opportunityRecords = regionStandardSetController.getRecords();
        hasPreviousOpportunity= !regionStandardSetController.getHasPrevious();
        hasNextOpportunity= !regionStandardSetController.getHasNext();
        
        return null;
    }
    
   public Boolean hasNextOpportunity{
        get {
            if(regionStandardSetController==null&&regionStandardSetController.getHasNext()==true)
                return true;
            return !regionStandardSetController.getHasNext();
        }
        set;
    }
    
    
    public Boolean hasPreviousOpportunity{
        get {
            if(regionStandardSetController==null)
               return true;
            return !regionStandardSetController.getHasPrevious();
        }
        set;
    }  
 
  }

Thanks & regards,
Lahari

January 13, 2016
·
Like
0
·
Follow
1

Best Answer chosen by Lahari Kondadi

Paul_Boiko
Hi Lahari,
What I usually do is use some existing date field on VisualForce page, this way it generates standard VisualForce date picker and it works in IE.
Here is example in controller created 2 empty objects (for example Opportunity) they will used just to dysplay date picker on the page and then get dates - you won't do anything else with them:

public class DateController { public Opportunity dateFromOpp {get;set;} public Opportunity dateToOpp {get;set;} public DateController() { dateFromOpp = new Opportunity(); dateToOpp = new Opportunity(); } public void doSomthing() { Date todate = dateToOpp.CloseDate; Date fromdate = dateFromOpp.CloseDate; } }
and on Visualforce page just use CloseDate or some other Date field:

<apex:page controller="DateController"> <apex:form> <apex:inputField id="from" label="From:" value="{!dateFromOpp.CloseDate}"/> <apex:inputField id="to" label="To:" value="{!dateToOpp.CloseDate}"/> </apex:form> </apex:page>

As a common practice mark answer as best if it helped you.

January 13, 2016
·
Like
1
·
Dislike
0

This was selected as the best answer

Lahari Kondadi
Hi Paul,
Thanks for your quick reply. The function doSomething() that you have written is it necessary? If it is yes where i have to place them in my code.

Thanks,
Lahari

January 13, 2016
·
Like
0
·
Dislike
0

Paul_Boiko
No it's not necessary - it's just example. You can get dates in your displayReport() method.

public void displayReport() {
todate = dateToOpp.CloseDate;
fromdate = dateFromOpp.CloseDate;
// the rest of the code to show report based on these dates
}

I think since CloseDate field is required it may require you to select date when form is submitted, but you should be able to add required = 'false' to avoid it.

January 13, 2016
·
Like
0
·
Dislike
0

Lahari Kondadi
Hi Paul,
Thanks a lot it is working like a charm.You made my day :).

Thanks,
Lahari

January 13, 2016
·
Like
0
·
Dislike
0

Lahari Kondadi
Hi Paul,
I have the issue when i run this code in apple ipad.
Below is the screenshot when i run the app in chrome browser based ipad with one/one.app.

As you can see above when i select on the app tab,the calendar is populating without selecting on any of the date field.

Below is the screenshot when i click on From date field where the date gets loaded.

This not working properly.The calendar should display when on click on date field and it should not display below.

What changes i have to do...?
Please help.

Thanks,
Lahari

January 14, 2016
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

DatePicker in visualforce which will run in all browser

All Answers

You need to sign in to do that.