+ Start a Discussion
Devendra@SFDCDevendra@SFDC 

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

Best Answer chosen by Admin (Salesforce Developers) 
Navatar_DbSupNavatar_DbSup

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&colon;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">[&nbsp;<a

href="javascript&colon;DatePicker.insertDate('2/3/2011', 't', true);"

>2/3/2011</a>&nbsp;]</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

Navatar_DbSupNavatar_DbSup

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&colon;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">[&nbsp;<a

href="javascript&colon;DatePicker.insertDate('2/3/2011', 't', true);"

>2/3/2011</a>&nbsp;]</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. 

This was selected as the best answer
calvin_nrcalvin_nr

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

Devendra@SFDCDevendra@SFDC

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

KavyaKavya

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

vikramkkvikramkk

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

jitenjiten

<apex:inputText value="{!li.beginDate}" onfocus="DatePicker.pickDate(false, this, false);" id="date1"/> 

 

This should work.

Santosh BhaviSantosh Bhavi

<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?

Commercial30Commercial30

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

Brad ThompsonBrad Thompson
This code doesn't work and I'm curious as to why.  My very simple implementation to get the datepicker working is throwing javascript errors on the page.  The errors are thrown in main.js and SfdcCore.js so they are files out of my control.  Do additional css or js files need to be included on the page?  I've been all over the boards and tried various things but no luck.  Everyone claims the format I have should work. 

<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();

    } 
}

    
Oz AdiyamanOz Adiyaman
It seems Salesforce is now dynamically loading the DataPicker JS. So, the code doesn't work anymore. You can either put a hidden Date field on the VF page or you can set the version of the VF page back to 29 and it should solve the problem. Both are not real solutions but it will at least make it work. 
HariPHariP

<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
Menashe Yamin 8Menashe Yamin 8
Thanks @Oz! you saved me.

@Popuri Hari look that you vfp version is 29 like @oz mention. I had the same issue and it's saved me
Zeeshan Kamal 27Zeeshan Kamal 27
Hey .. I am getting the calender in the visual force page but i am not getting the calender date picker in salesforce 1. please help
David Roberts 4David Roberts 4
See Custom Object in a Wrapper Class solution. (https://salesforce.stackexchange.com/questions/138171/visualforce-input-type-date-picker-field) Brilliant! Well done Cloud Ninja.