+ Start a Discussion
Edwin VijayEdwin Vijay 

Date Picker inVisualForce

Hi All,

I want a input text in my visualforce page. On clicking this inputbox the standard salesforce calendar should popup. Is this possible.

Please note that i need only a input text and not a input field.

I got the below code from the forums.

What are the values that i have to pass in the highlighted part of the code. Is this possible in Visualforce.

Code:
<a href="javascript&colon;openPopupFocus

('/home/calendar.jsp—form=form1&field=sdate&mo=0&callonchange=true', '_blank', 186, 170, 'width=186,height=170,resizable=yes,toolbar=no,status=no,scrollbars=no,menubar=no,directories=no,location=no,dependant=yes', true, true);"

class="datePicker"

title="Pick A Date (New Window)"

onclick="setLastMousePosition(event)"

id="sdatePopCal">

<img src="/s.gif" alt="Pick A Date (New Window)" class="datePickerIcon">

</a>

 Thanks,
Edwin
Best Answer chosen by Admin (Salesforce Developers) 
jwetzlerjwetzler
In general it is a bad idea to copy any of the javascript calls that the app uses.  These can and do change frequently and might have side effects that are hard to track down.

To get the datePicker the best solution right now is to use inputField and then use an empty SObject with a date field to store the value for you.
so <apex:inputField value="{!proxyObject.closeDate}"/>
and in your controller
Opportunity o = new Opportunity();
public Opportunity getProxyObject() { return o; }

then in your controller when you need to access the date you ask for o.closeDate.

All Answers

jwetzlerjwetzler
In general it is a bad idea to copy any of the javascript calls that the app uses.  These can and do change frequently and might have side effects that are hard to track down.

To get the datePicker the best solution right now is to use inputField and then use an empty SObject with a date field to store the value for you.
so <apex:inputField value="{!proxyObject.closeDate}"/>
and in your controller
Opportunity o = new Opportunity();
public Opportunity getProxyObject() { return o; }

then in your controller when you need to access the date you ask for o.closeDate.
This was selected as the best answer
rfanningrfanning

Thanks for the advice, Jill.  I am able to get the date picker to come up (slight difference: I'm using a custom object instead of Opportunity because I need DateTime, not just Date).  However, the date picker is always 'popping up' when the page loads.   I notice on the Contact Edit screen, the date picker does not pop up.  Is there a way to disable the 'pop up' behavior?

 

Thanks in advance.

rfanningrfanning

The pop up behavior occurs on the onfocus() event of the DatePicker, so as a workaround I am setting focus to another object when the page loads.

 

<script type="text/javascript">
   
    window.onload=function() {
        focus('{!$Component.mainPage.mainForm.languagePickList}');         
    }
   
    function focus(id){
        document.getElementById(id).focus();
    }
  </script>

VeniVeni

How to change the Field Name, it gives Close Date as the Field Name i want that as xyz as field Name, can u suggest Me

 

rfanningrfanning

The field name comes from the label on the field ({!proxyObject.closeDate} in this scenario) .

 

So if you want another field name, you could 1) use another field on another object that matches your desired field name or 2) make a custom field on the proxy object that you are using and label it appropriately

 

Option 1 is preferable since Option 2 would have you making a custom field just for the purposes of having a datepicker.

jwetzlerjwetzler
I would actually go with the other option -- create a new custom object and a new custom field.  If you use a random date field on some object and later decide to revoke CRUD on that object or FLS on that field, your users will no longer have access to this field on your VF page.  Better to keep it on a separate object where you can leave the CRUD and FLS alone.
CaffeineCaffeine

Jill,

I'm not sure if you're still monitoring this one, but do we have any idea when we might change this behavior. 

 

It just seems so limiting for the UI to be so tightly twined with SObjects to the point that one just can't just declare a Date property in the controller and have it render with a Date picker in the UI.

 

The idea on the idea exchange here: http://bit.ly/9AmWe5

 

Thanks.

simsonsimson

hi Jill

Any updates since your comments on date picker since 2008.

 

Cheers,

Simson

Edwin VijayEdwin Vijay

Hello Simson,

 

There is no seperate date picker component available as of now. Anyhow, the date inputfield is a decent workaround.

 

Thanks,

Edwin

anukarthi_nimmalaanukarthi_nimmala

Hi,

 

   I want to  create a datepicker using javascript function is it possible to do so? If so please help  me .Please provide me any example  in doing it.

simsonsimson

yes its possible to create a datepicker using javascript function.

 You can find a good datepicker at http://www.wohill.com/design/178/A-JavaScript-date-picker.html

Save the js in the static resource and include it in the VF page like

 

<apex:includeScript value="{!URLFOR($Resource.CONTROL NAME, '/CALENDERCONTROL.js')}"/>

 

The Code to call the javascript function will be

 

 

<apex:outputPanel >  
     <apex:inputText disabled="true" id="StartDate" value="{!strDate}"/>
     <apex:outputPanel onclick="openCalender('{!$Component.StartDate}','{$Component.startDate}');" > 
    <img class="datePickerIcon" alt="Pick A Date" title="Pick A Date" src="/s.gif"/>
</apex:outputPanel>

 

AnunimmalaAnunimmala

Hi Simson,

 

 So nice of your reply ,Thanks a lot for that  i have done as if you suggested .But still When iam clicking calendar icon iam not able to see calendar i doont know where iam going wrong please check it.

 

 

My code is as follow

 

 

<apex:page controller="testdatepicker2">
<apex:form>
<apex:includeScript value="{!URLFOR($Resource.CalendarControljs, 'application/x-javascript.js')}"/>
<!--<apex:includeScript value="{!URLFOR($Resource.CalendarControljs, 'CalendarControljs.js')}"/>-->
 <apex:inputText  id="StartDate" value="{!strDate}"/>
 <apex:outputPanel onclick="openCalender('{!$Component.StartDate}','{$Component.startDate}');" >
    <img class="datePickerIcon" alt="Pick A Date" title="Pick A Date" src="/s.gif"/>
</apex:outputPanel>

</apex:form>

</apex:page>

 

and i saved the javascript file as js  and uploaded it to static resources and used it as shown in d code but it still not working please check where iam going wrong.. I used the js file which is given by you.in the link.

 

  So please tell me why its not working and correct me if iam going wrong.

 

 

                                                                          Thanks and regards,

                                                                                        Anu

 

 

 

 

 

 

 

 

 

AloneAlone

Hi Jill,

 

I am new, Can you help me on this I was trying to get the date using user input using APEX, but my code is working.

 

My code is below:

 

Apex:

-----

public class InvoicePreview
{
    Invoice__c Opt1 = New Invoice__c();
   
    public Invoice__c GetProxyObject1()
    {
        return Opt1;
    }
     
  
    public static DateTime Dat1 ;
    
    public void setDat1()
    {
        Dat1 = Opt1.Billing_period_begin_date__c;
    }    
    public DateTime getDat1()
    {
        return Dat1;
    }    
    
    public static List<Invoice__c> getinvoice()
    {
        System.debug(Dat1);
        List<Invoice__c> InvoiceList = new List<Invoice__c>();
        if(Dat1 !=null)
        {
          for(Invoice__c c : [ select Id,Invoice_Amount__c from Invoice__c
                               where Billing_period_begin_date__c < :Dat1
                             ])
          {
           InvoiceList.add(c);
          }
         }
        system.debug(InvoiceList);
        return InvoiceList ;
    }
   public PageReference search()
   {
        List<Invoice__c> selectedInvoice = new List<Invoice__c>();
        for(Invoice__c cCon: getinvoice())
        {
            selectedInvoice.add(cCon);
        }
         
        return null;
    }
      
 }

 

VisualFoce:

------------------

 

<apex:page controller="InvoicePreview" tabStyle="Invoice__c">
 
  <apex:form >
 
  <apex:pageBlock >
   <apex:pageBlockButtons >
        <apex:commandButton value="Search" action="{!Search}" rerender="table"/>
    </apex:pageBlockButtons>
    
    <apex:pageblocksection title="Search results">
        
        <apex:inputField value="{!ProxyObject1.Billing_period_begin_date__c}"   />
       
        <apex:pageBlockTable value="{!invoice}" var="cCustomer" id="table">
                       
            <apex:column >
            <apex:outputField value="{!cCustomer.Invoice_Amount__c}"/>
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageblocksection>        
  </apex:pageBlock>
  </apex:form>
 
 
</apex:page>

 

 

Mayank_JoshiMayank_Joshi

Hi Jill ,

 

I took your refrence to resolve one of the requirement for Datepicker . 

 

The main use case for this workarround is " we can create a custom object (to provide permission for every profile and through that we could use date field for date picker ) in any Vf page . Other ,we need to grant CRUD and FLS for the standard obejct . That's true .

 

Also, I saw this post  http://forums.sforce.com/t5/Visualforce-Development/handling-date-input-that-s-not-bound-to-an-sobject/m-p/80309#M2968  , in which salesforce is planning for inputDate component. 

 

If you could provide , when this will available . Because , currently your reply is helpful for many developers for refrence . So , it would be great if you have any information related to it . 

 

Thanks,

rfanrfan

The popup behavior of the date picker is not being invoked using Jill's solution from 07-10-2008 .  The popup behavior used to work as intended in previous Salesforce versions, but it has recently stopped working.

 

What is the recommended way to have a DateTime picker on a custom VisualForce page? 

calvin_nrcalvin_nr

Sorry for bringing up an old topic. But has there been a recent update on this issue? It will be great to have a nice date input component in Visual force.

Leslie LinardLeslie Linard

The simplest way is to find a standard or custom object with the field type you need.  So if you are looking for a date field then find a standard or custom object with a date field.  You can create a new custom object for this purpose if you wish.

 

For this example, I have chosen to use a custom object called Custom_Object__c with a date field called Date_Field__c.

 

1. Declare a property in your controller to hold an instance of this temporary object.

 

public Custom_Object__c Fields { get; set; }

 

2. Initialize the property by creating a new instance of this object and assign it to the property.

 

Fields = new Custom_Object__c();

 

3. Optionally, load the value you wish to edit into Date_Field__c.

 

Fields.Date_Field__c = Date.Today();

 

In your Visualforce page, use the inputField component to enable editing for Date_Field__c.  You may need to specify a custom label for the field using the label attribute if the default label is not what you want.

 

<apex:inputField label="My Date Label" value="{!Fields.Date_Field__c}"></apex:inputField>

 

And lastly, don't forget to copy the value from Date_Field__c to wherever it really needs to go after the user is done editing it.

 

calvin_nrcalvin_nr

I am creating a page using visualforce and this page is shown in a customer portal. I did follow the instructions given here. I do not see a popup and instead see the default date I have initialized this to. I am using a date field from a custom object.

 

How can I see the popup? The user has read/write access to the date field.

Edwin VijayEdwin Vijay

You mean you see a text box and on the right of the box today's date. But when you clikc on the text box, the date picker does not open up?

calvin_nrcalvin_nr

This is how it appears. The dates appear as text. Nothing happens if I click anywhere on them. I am not showing headers or the standard stylesheets. I hope thats not the issue here.

 

 

calvin_nrcalvin_nr

Ok, I used a 3rd party date picker and it is suiting my needs well.

A tutorial by none other than Bob Buzzard. If u need a good date picker in ur custom VF pages....please use this one.

 

http://bobbuzzard.blogspot.com/2012/03/custom-date-picker.html