+ Start a Discussion
Arunkumar KathirArunkumar Kathir 

Input Calendar field in Visualforce page

 

I have a requirement to search event records with filter criteria as StartDate.

 

For this requirement, I need to have a Input calendar field in Visualforce page.

 

Once I got Input Date, I will query the events by comparing that input date with start date.

 

My queries are,

 

How to create input calendar field in Visualforce page?

How to get that field value and use that in controller?

 

Please help.

Best Answer chosen by Admin (Salesforce Developers) 
Avidev9Avidev9

Lets try to debug your code

you have used 

 

<apex:inputField id="StartDate" value="{!Event.StartDate__c}"/>

 Have a close look did you ever bind it with a controller variable ?

 

public Date StartDate {get;set;}

 The above variable was never used in the page. How will it get the value from page ? Actually it wont, because you never binded actuall variable

 

Lets change the code a lil bit

 

public with sharing class EventSearchController1 {
    private ApexPages.StandardController controller {
        get;
        set;
    }
    public List < Event > searchResults {
        get;
        set;
    }
    public Event Ev_StartDate {
        get;
        set;
    }
    // standard controller - could also just use custom controller
    public EventSearchController1(ApexPages.StandardController controller) {
    	Ev_StartDate = new Event();
    }

    // fired when the search button is clicked
    public PageReference search() {
        Date StartDate = Ev_StartDate.StartDate__c;

        system.debug(StartDate);
        String qry = 'select WhoId, Description, Location, StartDateTime  from Event ' +
            'where StartDate__c =: StartDate  AND ParentEventID__c != Null order by Location';
        searchResults = Database.query(qry);
        return null;
    }

    // fired when the save records button is clicked
    public PageReference save() {

        try {
            if (searchResults.size() > 0) {
                update searchResults;
            }
        }
        Catch(DMLException e) {
            ApexPages.addMessages(e);
            return null;
        }

        return new PageReference('/home/home.jsp');
    }

    // takes user back to main record
    public PageReference cancel() {
        return new PageReference('/home/home.jsp');
        //return new PageReference('/'+ApexPages.currentPage().getParameters().get(''));
    }

}

 

<apex:page standardController="Event" extensions="EventSearchController1">


  <apex:form >
    <apex:pageBlock mode="edit" id="block">
      <apex:pageBlockButtons location="both">
        <apex:commandButton action="{!save}" value="Save Records"/>
        <apex:commandButton action="{!cancel}" value="Cancel"/>
      </apex:pageBlockButtons>
      <apex:pageMessages />
 
      <apex:pageBlockSection >
        <apex:pageBlockSectionItem >
          <apex:outputLabel for="StartDate">Start Date</apex:outputLabel>
          <apex:panelGroup >
          <apex:inputField id="StartDate" value="{!Ev_StartDate.StartDate__c}"/>
          
          <apex:commandButton value="Search" action="{!search}" rerender="block" status="status"/>
          </apex:panelGroup>
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection><br/>
 
      <apex:actionStatus id="status" startText="Searching... please wait..."/>
      <apex:pageBlockSection title="Search Results" id="resultsBlock" columns="1">
        <apex:pageBlockTable value="{!searchResults}" var="item" rendered="{!NOT(ISNULL(searchResults))}">
          <apex:column headerValue="Attendees" width="100">
            <apex:outputField value="{!item.WhoId}"/>
          </apex:column>  
          <apex:column headerValue="Location" width="100">
            <apex:outputField value="{!item.Location}"/>
          </apex:column>
          <apex:column headerValue="Description" width="100">
            <apex:inputField value="{!item.Description}"/>
          </apex:column>
        </apex:pageBlockTable>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

 

 

All Answers

QuriesQuries

Hi,

 

  If you have a Date field already created for the object whose records you want to search, you can directly use that field in vf page using <apex:inputField>. If 'standardStyleSheet' attribute of your <apex:page> is true then when a user clicks on that field a pop-up calendar will automatically open and a date can be selected.

 

Thanks

 

Arunkumar KathirArunkumar Kathir

Hi,

 

I have tried this. I got the calendar popup for the input field. I can select date also. But I'm unable to get the Date value I have selected and used it in Apex controller. Can you pls try and explain it using any sample code?

 

 

Thanks,

Arunkumar

 

Avidev9Avidev9
Well Arun, Quries gave you the right trick.
Make sure you initialise your object that you are referring before using in VF page.

Else will suggest you to post your code
Arunkumar KathirArunkumar Kathir

Hi,

 

Below are the VF code and Apex controller,

 

<apex:page standardController="Event" extensions="EventSearchController1">


  <apex:form >
    <apex:pageBlock mode="edit" id="block">
      <apex:pageBlockButtons location="both">
        <apex:commandButton action="{!save}" value="Save Records"/>
        <apex:commandButton action="{!cancel}" value="Cancel"/>
      </apex:pageBlockButtons>
      <apex:pageMessages />
 
      <apex:pageBlockSection >
        <apex:pageBlockSectionItem >
          <apex:outputLabel for="StartDate">Start Date</apex:outputLabel>
          <apex:panelGroup >
          <apex:inputField id="StartDate" value="{!Event.StartDate__c}"/>
          
          <apex:commandButton value="Search" action="{!search}" rerender="block" status="status"/>
          </apex:panelGroup>
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection><br/>
 
      <apex:actionStatus id="status" startText="Searching... please wait..."/>
      <apex:pageBlockSection title="Search Results" id="resultsBlock" columns="1">
        <apex:pageBlockTable value="{!searchResults}" var="item" rendered="{!NOT(ISNULL(searchResults))}">
          <apex:column headerValue="Attendees" width="100">
            <apex:outputField value="{!item.WhoId}"/>
          </apex:column>  
          <apex:column headerValue="Location" width="100">
            <apex:outputField value="{!item.Location}"/>
          </apex:column>
          <apex:column headerValue="Description" width="100">
            <apex:inputField value="{!item.Description}"/>
          </apex:column>
        </apex:pageBlockTable>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

 

 

public with sharing class EventSearchController1 {
private ApexPages.StandardController controller {get; set;}
  public List<Event> searchResults {get;set;}
  public Date StartDate {get;set;}
  // standard controller - could also just use custom controller
  public EventSearchController1(ApexPages.StandardController controller) {}
    
  // fired when the search button is clicked
  public PageReference search() {
      //Datetime dt = DateTime.parse('6/13/2013 8:00 AM');
      //Date dt = date.parse('6/14/2013');
      
      system.debug(StartDate);
    String qry = 'select WhoId, Description, Location, StartDateTime  from Event ' +
      'where StartDate__c =: StartDate  AND ParentEventID__c != Null order by Location';
    searchResults = Database.query(qry);
    return null;
  }
 
  // fired when the save records button is clicked
  public PageReference save() {
 
    try {
        if(searchResults.size() > 0)
        {
      update searchResults;
        }
    } Catch (DMLException e) {
      ApexPages.addMessages(e);
      return null;
    }
 
    return new PageReference('/home/home.jsp');
  }
 
  // takes user back to main record
  public PageReference cancel() {
      return new PageReference('/home/home.jsp');
    //return new PageReference('/'+ApexPages.currentPage().getParameters().get(''));
  }
 
}

 

 

StartDate__c is a custom date field in Event Standard object. In apex controller, system.debug in line 13 is returning null value for Startdate.

 

 

Thanks,

Arunkumar

 

Avidev9Avidev9

Lets try to debug your code

you have used 

 

<apex:inputField id="StartDate" value="{!Event.StartDate__c}"/>

 Have a close look did you ever bind it with a controller variable ?

 

public Date StartDate {get;set;}

 The above variable was never used in the page. How will it get the value from page ? Actually it wont, because you never binded actuall variable

 

Lets change the code a lil bit

 

public with sharing class EventSearchController1 {
    private ApexPages.StandardController controller {
        get;
        set;
    }
    public List < Event > searchResults {
        get;
        set;
    }
    public Event Ev_StartDate {
        get;
        set;
    }
    // standard controller - could also just use custom controller
    public EventSearchController1(ApexPages.StandardController controller) {
    	Ev_StartDate = new Event();
    }

    // fired when the search button is clicked
    public PageReference search() {
        Date StartDate = Ev_StartDate.StartDate__c;

        system.debug(StartDate);
        String qry = 'select WhoId, Description, Location, StartDateTime  from Event ' +
            'where StartDate__c =: StartDate  AND ParentEventID__c != Null order by Location';
        searchResults = Database.query(qry);
        return null;
    }

    // fired when the save records button is clicked
    public PageReference save() {

        try {
            if (searchResults.size() > 0) {
                update searchResults;
            }
        }
        Catch(DMLException e) {
            ApexPages.addMessages(e);
            return null;
        }

        return new PageReference('/home/home.jsp');
    }

    // takes user back to main record
    public PageReference cancel() {
        return new PageReference('/home/home.jsp');
        //return new PageReference('/'+ApexPages.currentPage().getParameters().get(''));
    }

}

 

<apex:page standardController="Event" extensions="EventSearchController1">


  <apex:form >
    <apex:pageBlock mode="edit" id="block">
      <apex:pageBlockButtons location="both">
        <apex:commandButton action="{!save}" value="Save Records"/>
        <apex:commandButton action="{!cancel}" value="Cancel"/>
      </apex:pageBlockButtons>
      <apex:pageMessages />
 
      <apex:pageBlockSection >
        <apex:pageBlockSectionItem >
          <apex:outputLabel for="StartDate">Start Date</apex:outputLabel>
          <apex:panelGroup >
          <apex:inputField id="StartDate" value="{!Ev_StartDate.StartDate__c}"/>
          
          <apex:commandButton value="Search" action="{!search}" rerender="block" status="status"/>
          </apex:panelGroup>
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection><br/>
 
      <apex:actionStatus id="status" startText="Searching... please wait..."/>
      <apex:pageBlockSection title="Search Results" id="resultsBlock" columns="1">
        <apex:pageBlockTable value="{!searchResults}" var="item" rendered="{!NOT(ISNULL(searchResults))}">
          <apex:column headerValue="Attendees" width="100">
            <apex:outputField value="{!item.WhoId}"/>
          </apex:column>  
          <apex:column headerValue="Location" width="100">
            <apex:outputField value="{!item.Location}"/>
          </apex:column>
          <apex:column headerValue="Description" width="100">
            <apex:inputField value="{!item.Description}"/>
          </apex:column>
        </apex:pageBlockTable>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

 

 

This was selected as the best answer