You need to sign in to do that
Don't have an account?
Edwin Vijay
Thanks,
Edwin
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: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
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
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.
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.
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>
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
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.
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.
hi Jill
Any updates since your comments on date picker since 2008.
Cheers,
Simson
Hello Simson,
There is no seperate date picker component available as of now. Anyhow, the date inputfield is a decent workaround.
Thanks,
Edwin
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.
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
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
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>
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,
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?
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.
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.
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.
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?
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.
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