Don't have an account?

Browse by Topic

+ Start a Discussion

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

February 12, 2012
·
Like
0
·
Follow
5

Best Answer chosen by Admin (Salesforce Developers)

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


<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&colon;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.

February 12, 2012
·
Like
0
·
Dislike
0

This was selected as the best answer

calvin_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

April 9, 2012
·
Like
0
·
Dislike
0

Devendra@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

April 9, 2012
·
Like
0
·
Dislike
0

Kavya
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

April 10, 2012
·
Like
0
·
Dislike
0

vikramkk
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

April 13, 2012
·
Like
0
·
Dislike
0

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

This should work.

August 20, 2012
·
Like
0
·
Dislike
1

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

September 14, 2012
·
Like
0
·
Dislike
0

Commercial30
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

May 10, 2013
·
Like
0
·
Dislike
0

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

}
}

October 24, 2014
·
Like
0
·
Dislike
0

Oz 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.

November 24, 2014
·
Like
2
·
Dislike
0

HariP

<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

September 28, 2015
·
Like
0
·
Dislike
0

Menashe 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

December 3, 2016
·
Like
0
·
Dislike
0

Zeeshan 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

December 13, 2017
·
Like
0
·
Dislike
0

David 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.

April 15, 2020
·
Like
0
·
Dislike
0

JJJFigueroa
I need to add a DatePicker to my VF page (form) in the line where I bolded below. I created a controller but no luck and keep getting an error. but keep on getting an error. Not having a date picker is not allowing for submissions to be successful into Salesforce because they are adding text into a date field.

Need some help.

<apex:page standardController="Application_Participation_Agreement__c" showHeader="false" standardStylesheets="false">
<style>
.dateFormat{display:none;}
label{margin:0 5px 5px 15px;}
.pbBottomButtons table {width:100%;text-align:center;}
</style>
<apex:stylesheet value="https://fonts.googleapis.com/css?family=Oswald"/>
<apex:stylesheet value="https://ksaevents.net/wp-content/themes/ksa/css/bootstrap.min.css"/>
<apex:stylesheet value="https://ksaevents.net/wp-content/themes/ksa/css/style.css"/>
<nav id="header" class="navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="logo">
<a href="https://ksaevents.net/"><img src="https://ksaevents.net/wp-content/themes/ksa/images/logo.png"/></a>
</div>
</div>
<div class="collapse navbar-collapse" id="header-collapse" style="min-width: 840px;">
<div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="nav navbar-nav navbar-left main_nav sf-js-enabled sf-arrows"><li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page page_item page-item-4 menu-item-10"><a href="http://ksaevents.net/">HOME</a></li>

</ul></div>
<div class="menu-top-navigation-container" style="display:none;"><ul id="menu-top-navigation" class="nav navbar-nav navbar-right"><li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="/contact/">REQUEST INFO</a></li>
</ul></div> </div>
</div>
</nav>
<center style="padding-top:100px;text-align:center;margin:auto;max-width:1160px;"><font color="red">
<apex:outputText style="font-weight: bold;font-size: 16px;"
value="This application is a contract confirming your intent to participate in a KSA Event. But does not guarantee acceptance into any KSA Events or other associated
event until a written confirmation has been sent by KSA. As some applications are time sensitive and provide for a first applied selection process, please note that
completion of this form and delivery to KSA via any method does not insure receipt. Only a return letter of receipt from KSA is a guarantee of receipt."/><br/>
</font></center>
<apex:stylesheet value="{!$Resource.KSAWebFormCSS}" />
<apex:image id="theImage" value="https://c.na59.content.force.com/servlet/servlet.ImageServer?id=015f4000002Bq2D&oid=00Df4000003AdqV&lastMod=1546287434000" width="426" height="130" style="display:none;"/>
<div class="slide" style="margin:auto;">
<div class="innerwrap contactwrap">
<div class="row">
<apex:form >
<apex:pageBlock title="KSA Application / Participation Agreement: {!Application_Participation_Agreement__c.Name}">
<apex:pageBlockSection title="Submitter Information" columns="2">
<apex:inputField value="{!Application_Participation_Agreement__c.Printed_Name__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Title__c}"
label="Title" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="School / Head Coach Contact Information" columns="2">
<apex:inputField value="{!Application_Participation_Agreement__c.School_Name__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Head_Coach__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.School_Phone__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Coaches_Email__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.School_Fax__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Coaches_Cell_Phone__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="School Address" columns="1">
<apex:inputField value="{!Application_Participation_Agreement__c.School_Mailing_Address__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.School_City__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.School_Country__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.School_State__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.School_Zip__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="School Administration / Principal" columns="2">
<apex:inputField value="{!Application_Participation_Agreement__c.Athletic_Director__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Principal__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Athletic_Director_Phone__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Principal_Phone__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Athletic_Director_Email__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Principal_Email__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Enrollment / Mascot / Colors" columns="2">
<apex:inputField value="{!Application_Participation_Agreement__c.Current_Total_School_Enrollment_9_12__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.School_Mascot__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Approx_Male_Enrollment_9_12__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.School_Colors__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Approx_Female_Enrollment_9_12__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Booster / Parent Coordinator" columns="2">
<apex:inputField value="{!Application_Participation_Agreement__c.Booster_Contact_s__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Parent_Coordinator__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Booster_Contact_Phone__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Parent_Coordinator_Phone__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Booster_Contact_Email__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Parent_Coordinator_Email__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Classification" columns="2">
<apex:inputField value="{!Application_Participation_Agreement__c.Country__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.State__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Conference__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Region__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Class_A_Level__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.District__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Team Social Media Information" columns="2">
<apex:inputField value="{!Application_Participation_Agreement__c.Team_Facebook_Page__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Team_Twitter_Handle__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Team_Instagram__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Event Information" columns="2">
<apex:inputfield value="{!Application_Participation_Agreement__c.Date_of_Event__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Sport_Event__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Location__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Bringing_your_Junior_Varsity_Team__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Are_you_a_State_Member_School__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Are_you_a_Boys_or_Girls_Team__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Has_your_team_traveled_before__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.If_so_where__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Participant Counts" columns="2">
<apex:inputField value="{!Application_Participation_Agreement__c.Returning_Starters__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Freshman__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Sophomores__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Juniors__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Seniors__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="School Win / Loss Record" columns="2">
<apex:inputField value="{!Application_Participation_Agreement__c.Current_Season_Record__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Last_Season_Record__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.X2_Years_Prior_Season_Record__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Championships / Honors" columns="1">
<apex:inputField value="{!Application_Participation_Agreement__c.Championships_Notable_Honors__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Referral Program" columns="2">
<apex:inputField value="{!Application_Participation_Agreement__c.Referral_School__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Referral_Coach__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Referral_Coach_Phone__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Referral_Coach_Email__c}" styleClass="form-control"/>
<apex:inputField value="{!Application_Participation_Agreement__c.Sport__c}" styleClass="form-control"/>
</apex:pageBlockSection>
<apex:pageBlockButtons >
<apex:commandButton action="{!save}" value="Submit Application"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</div></div></div>
</apex:page>

March 9, 2021
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Datepicker in Visualforce page

All Answers

You need to sign in to do that.