You need to sign in to do that
Don't have an account?

Datepicker in Visualforce page
Hello Board,
I want to use two datepicker on visualforce page to specify range and based on their input values execute the query and display the result.
Is there any Datepicker available which will look like standard datepicker available in SF?
Thanks,
Devendra
Hi,
There are different ways to do this.
1st. You have to simply use apex:inputfield and bind the field with date type field and it will automatically take the Sales force Calander.Try the below as Reference:
<apex:page standardcontroller=’Account’>
<apex:form>
<apex:inputfield value=”{!Account.DateTypeField}”
</apex:form>
</apex:page>
2nd. You can use <apex:inputtext> tag to achieve this:
<apex:page standardcontroller=’Account’ id=”mypage”>
<apex:form id=”myform”>
<apex:inputText styleClass="cssbody" value="{!datename}" size="10" id="demo" onfocus="DatePicker.pickDate(false, 'myPage:myForm:demo', false);" />
</apex:form>
</apex:page>
3rd .
<apex:page >
<apex:form >
<table>
<!-- <input id="demo3" type="text" size="25"><a href="javascript:NewCal('demo3','ddmmmyyyy',true,24)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a> -->
<!-- NewCal([textbox id],[date format],[show time in calendar?],[time mode (12,24)?]) -->
<td> Date<br></br><input id="t" name="datee" onfocus="DatePicker.pickDate(false,
't', false);" size="12" tabindex="28" type="text" /><span class="dateFormat">[ <a
href="javascript:DatePicker.insertDate('2/3/2011', 't', true);"
>2/3/2011</a> ]</span></td>
</table>
</apex:form>
</apex:page>
Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.
All Answers
Hi,
There are different ways to do this.
1st. You have to simply use apex:inputfield and bind the field with date type field and it will automatically take the Sales force Calander.Try the below as Reference:
<apex:page standardcontroller=’Account’>
<apex:form>
<apex:inputfield value=”{!Account.DateTypeField}”
</apex:form>
</apex:page>
2nd. You can use <apex:inputtext> tag to achieve this:
<apex:page standardcontroller=’Account’ id=”mypage”>
<apex:form id=”myform”>
<apex:inputText styleClass="cssbody" value="{!datename}" size="10" id="demo" onfocus="DatePicker.pickDate(false, 'myPage:myForm:demo', false);" />
</apex:form>
</apex:page>
3rd .
<apex:page >
<apex:form >
<table>
<!-- <input id="demo3" type="text" size="25"><a href="javascript:NewCal('demo3','ddmmmyyyy',true,24)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a> -->
<!-- NewCal([textbox id],[date format],[show time in calendar?],[time mode (12,24)?]) -->
<td> Date<br></br><input id="t" name="datee" onfocus="DatePicker.pickDate(false,
't', false);" size="12" tabindex="28" type="text" /><span class="dateFormat">[ <a
href="javascript:DatePicker.insertDate('2/3/2011', 't', true);"
>2/3/2011</a> ]</span></td>
</table>
</apex:form>
</apex:page>
Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.
Hey Ankit,
This would help me a lot. For your 1st solution, if I use a dummy field from an object, would I expect to see the datepicker on the visual force page? Currently I am not seeing this.
Thanks,
Calvin
Hi Calvin,
Yes, you should able to view datepicker for 1st solution.
What is the data type of dummy field? Is there field level security for dummy field?
Thanks,
Devendra
HI Ankit...
When I use the 3rd solution ... I am not able to pass the selected date to the apex controller.. could you help me on this :)
Thanks
Kavya
Hi Ankit
I tried option 2 with <apex:inputtext> inside <apex:column> in pageblocktable. But I didn't calendar popup. Do I need to make any change to make it work?
Thanks
Vikram
<apex:inputText value="{!li.beginDate}" onfocus="DatePicker.pickDate(false, this, false);" id="date1"/>
This should work.
<apex:inputText styleClass="cssbody" value="{!datename}" size="10" id="demo" onfocus="DatePicker.pickDate(false, 'myPage:myForm:demo', false);" />
This code is not working for me. what should be defined in datename function?
where have u defined datename method?
You have to put it inside a pageblock to make it work:
<apex:pageblock>
<apex:inputText value="{!selectedDate}" size="10" id="queryDate" onfocus="DatePicker.pickDate(false, this, false);" />
</apex:pageblock>
and you can avoid the Block style by adding something like these in your css:
.apexp .bPageBlock.apexDefaultPageBlock .pbBody {
margin: 0;
}
body .secondaryPalette.bPageBlock,
.secondaryPalette.bPageBlock , .bPageBlock .secondaryPalette {
background-color: transparent;
background-image: url("");
background-position: left bottom;
background-repeat: no-repeat;
border: none;
margin: 0;
padding: 0;
border-radius: 0;
}
Cheers!
Flor
<apex:page controller="myController">
<apex:form >
<apex:pageBlock title="Tesing" id="pageblock">
<apex:inputText value="{!dateValue}" id="test1" onfocus="DatePicker.pickDate(false, 'test1', false);" />
</apex:pageBlock>
</apex:form>
</apex:page>
Controller code
global with sharing class myController {
public String dateValue {get;set;}
public myController() {
dateValue = Date.Today().format();
}
}
<apex:inputText id="moveindate" value="{!moveindate}" onclick="DatePicker.pickDate(false, this, true);" />
I don't get any datepciker when running the page. Can someone please hemp me?
<apex:form >
<apex:inputText id="moveindate" value="{!moveindate}" onclick="DatePicker.pickDate(false, this, true);" />
<apex:commandButton value="check number" action="{!checkfornumber}"/>
</apex:form>
Just tring the above sample code. Its not working. What am I missing?
Thanks
Hari
@Popuri Hari look that you vfp version is 29 like @oz mention. I had the same issue and it's saved me