function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
fsiddiq3fsiddiq3 

Add a date picker to visualforce page

Hello everyone,

 

  I am trying to add a simple date picker to my existing visualforce page and/or apex code. Our resource set up a nice grid using apex code and visualforce page, and unfortunately he is no longer around. I am not too familiar with using the code/page so any help would be appreciated! He created a apex code, page, and mycontroller extension. I want to simply add a datepicker so when you click into date field a datepicker pops up. Please let me know how this is done and whether you need the code or the page. I can copy and paste into here. Thanks very much!!

 

Fahd

Best Answer chosen by Admin (Salesforce Developers) 
mulvelingmulveling

Holy cow! Unfortunately, there's a lot of nasty CSS hacking going on in this page. Just a spot check reveals some sloppy redundancies, absolute positioning (a bad practice without the use of solid DHTML layout management), even IE-specific dynamic expressions (won't work in any non-IE browser). Check out the <style> block at the top of the page - the original author clearly intended to suppress/hide the date picker here. Remove the ".dateFormat" and ".datePicker,..." declarations and you SHOULD get the date picker popup back...however I still can't guarantee it wil work as intended with just that.

 

My guess is that with all the absolute position stuff going on in this page, the Salesforce date picker control may have gotten confused and popped it up a different location than the invoking date field - I've seen a case like that before. That's possibly why the author decided to suppress it. Another possibility - if the first date input field on the page doesn't get rendered until after a dynamic page refresh (re-POST), I've noticed that the datePicker popup doesn't work - it needs to be sent down in the initial page GET request, and that will only happen if there's a date input field rendered as part of the initial request.

This page likely requires some additional work (perhaps a good deal) to get working nicely with the datePicker.

 

--

Mike

All Answers

jeremyyjeremyy
If the field is a date or date/time field, just use the inputField tag:

<apex:inputField value="{!Account.LastModifiedDate}" />

 

BTW, it's ok to refer to your "resource" as a "person". 

fsiddiq3fsiddiq3
Lol, ok I will try that.
fsiddiq3fsiddiq3

Maybe I inserted it incorrectly, but that did not work. Here is my VF page. The two fields I want to be able to select a datepicker for I have bolded, please let me know what to do.

 

 

 

 

 

 

<apex:page standardController="New_Item_Tracker__c" extensions="NewItemTrackerController" contentType="text/html" showHeader="false" sidebar="false" >
<style>
    .dateFormat{
        display:none;
    }
    .datePicker, .datePicker .dateBar ,.datePicker .calBody, .datePicker .calDays, .datePicker .buttonBar, .datePicker Select {
        display:none;
        border-width:0px 0px medium;   
        border-bottom:0px solid #000000;
        padding:0px 0px 0px 0px;
    }
    body  {
        background-color: #F6F6F6;
        overflow: hidden;
    }

    .hdr{
        font-size:11px;
    }
   
    .btn, .button, .formulaButton, .btnWhatsNew {
        font-size:10px;
    }
    .input { font-size: 9px; font-family: Arial Unicode MS; }
    .input input { width: 125px; z-index:5 }
    .grid-div {OVERFLOW-Y:auto;OVERFLOW-X:hidden;HEIGHT:125px;WIDTH:100%}

    .requiredInput { display: inline; width: 150px; margin-left: 0px;  }
   
    .fixedHeader { position: absolute; top: 0px; }
   
    .hdr { background-color: #ccc; z-index: 100; }
   
   
   
</style>

 


<script language="javascript" >
 /*
 function findFocus() {
    for(i=0;i<document.forms.length;i++) {
        for(x=0;x<document.forms[i].elements.length;x++) {
            if(document.forms[i].elements[x].id.indexOf("marsprodtext") >=0 &&
               document.forms[i].elements[x].id.indexOf("marsprodtext_") < 0 ) {
                document.forms[i].elements[x].focus();
            }
        }
    }
   
    }
*/
 
</script>
<!--apex:detail subject="{!Customer_Event__c}" relatedList="false" ID="top"--><!--/apex:detail-->
<apex:form id="distform" prependId="false" >

<apex:messages >
</apex:messages>
<!--br/--><!--br/--><!--br/-->
<apex:pageBlock title="Edit Products" mode="detail">

<!--apex:pageBlockButtons -->
<apex:pageBlockButtons location="top">
<apex:commandButton action="{!saveChanges}" value="Step 1: Save Product Updates"
rerender="main" status="ajaxStatus" styleClass="btnImportant" />
</apex:pageBlockButtons>

<apex:actionStatus id="ajaxStatus" startText="Updating list...">
<apex:facet name="stop">
<apex:outputPanel id="main">
<div class="tableContainer"  style="margin-left: 0px;">
<div id="scrollarea" style="height: 400px; overflow: scroll; width: 99.9%; z-index: 10" >
<table id="Grid" border="0" cellspacing="1" class="scrollTable"style="margin-left: 0px;" >
<thead class="fixedHeader" style="position:absolute; top: 0px; z-index: 100">
<tr style="
        position:relative; top:expression(this.offsetParent.scrollTop); z-index: 100
        ">

<td class="hdr" VALIGN="TOP"><center>Mars Product</center></td>
<td class="hdr" VALIGN="TOP"><center>Pack</center></td>
<td class="hdr" style="background-color: #cca;" VALIGN="TOP"><center>Presentation Date<br>MM/DD/YYYY</br></center></td>
<td class="hdr" VALIGN="TOP"><center>Status</center></td>
<td class="hdr" VALIGN="TOP"><center>Number of stores<br>accepting item</br></center></td>
<td class="hdr" style="background-color: #cca;" VALIGN="TOP"><center>Projected In Store<br>MM/DD/YYYY</br></center></td>
<td class="hdr" style="background-color: #cca;" VALIGN="TOP"><center>Pending Decision Date<br>MM/DD/YYYY</br><br>REQUIRED IF<br/>STATUS = PENDING</br></center></td>
<td class="hdr" VALIGN="TOP"><center>What is this item<br>replacing?</br></center></td>
<td class="hdr" VALIGN="TOP"><center>Rejected Reason</center></td>
<td class="hdr" VALIGN="TOP"><center>Comments</center></td>
<td class="hdr" style="background-color: #cca;" VALIGN="TOP"><center>Updated Date<br>MM/DD/YYYY</br></center></td>

</tr>
</thead>
<tbody id="GridBody" class="scrollContent" style="z-index: 10;" >
<apex:repeat value="{!prodList}" var="list">
<tr>

<td class="input"><apex:outputField value="{!list.Mars_Product__c}" style="width=200; font-size:10px;"/></td>
<td class="input"><apex:outputField value="{!list.Pack__c}" style="width=120; font-size:10px;"/></td>
<td class="input"><apex:inputField value="{!list.Presentation_Date__c}" style="width=80; font-size:10px;"/></td>
<td class="input"><apex:inputField value="{!list.Status__c}" style="width=80; font-size:10px;"/></td>
<td class="input"><apex:inputField value="{!list.Number_of_Stores__c}" style="width=80; font-size:10px;"/></td>
<td class="input"><apex:inputField value="{!list.Projected_In_Store__c}" style="width=80; font-size:10px;"/></td>
<td class="input"><apex:inputField value="{!list.Pending_Decision_Date__c}" style="width=100; font-size:10px;"/></td>
<td class="input"><apex:inputField value="{!list.Product_Replaced__c}" style="width=160; font-size:10px;"/></td>
<td class="input"><apex:inputField value="{!list.Rejected_Reason__c}" style="width=120; font-size:10px;"/></td>
<td class="input"><apex:inputField value="{!list.Comments__c}" style="width=160; font-size:10px;"/></td>
<td class="input"><apex:outputField value="{!list.Updated_Date__c}" style="width=80; font-size:10px;"/></td>

 

</tr>

</apex:repeat>
<tr>
</tr>
</tbody>
</table>
</div></div>
<script>
//  document.getElementById('scrollarea').scrollHeight -= 100;
    //findFocus();
    //alert('{!New_Item_Tracker__c.Id}');
   
/* 
    for(i=0;i<document.forms.length;i++) {
        for(x=0;x<document.forms[i].elements.length;x++) {
            if(document.forms[i].elements[x].id.indexOf("reqField") >=0){
                if(document.forms[i].elements[x].value=="#FakeVal#"){
                    document.forms[i].elements[x].value='';
                }
            }
        }
    }
*/
/*
    var distArr = '{!prodList}';
    var distSplit = distArr.split(",");
    var sz = distSplit.length-1;

    function insertIntoLastRow(){
        for(i=0;i<document.forms.length;i++) {
        for(x=0;x<document.forms[i].elements.length;x++) {
            if(document.forms[i].elements[x].id.indexOf("reqField") >=0 &&
               document.forms[i].elements[x].id.indexOf(":"+sz+":") >= 0 ) {
                if(document.forms[i].elements[x].value=='' || document.forms[i].elements[x].value==null){
                        document.forms[i].elements[x].value = '#FakeVal#';
                }  
            }
        }
    }
    }
*/
    //
   </script>
</apex:outputPanel>
</apex:facet>
</apex:actionStatus>
</apex:pageBlock>
</apex:form>
</apex:page>

mulvelingmulveling

Holy cow! Unfortunately, there's a lot of nasty CSS hacking going on in this page. Just a spot check reveals some sloppy redundancies, absolute positioning (a bad practice without the use of solid DHTML layout management), even IE-specific dynamic expressions (won't work in any non-IE browser). Check out the <style> block at the top of the page - the original author clearly intended to suppress/hide the date picker here. Remove the ".dateFormat" and ".datePicker,..." declarations and you SHOULD get the date picker popup back...however I still can't guarantee it wil work as intended with just that.

 

My guess is that with all the absolute position stuff going on in this page, the Salesforce date picker control may have gotten confused and popped it up a different location than the invoking date field - I've seen a case like that before. That's possibly why the author decided to suppress it. Another possibility - if the first date input field on the page doesn't get rendered until after a dynamic page refresh (re-POST), I've noticed that the datePicker popup doesn't work - it needs to be sent down in the initial page GET request, and that will only happen if there's a date input field rendered as part of the initial request.

This page likely requires some additional work (perhaps a good deal) to get working nicely with the datePicker.

 

--

Mike

This was selected as the best answer
fsiddiq3fsiddiq3

Thanks Mike! That worked great. I am now able to see the date picker and am good to go. Didn't realize how many bugs the page had! Think we will run into issues if we ever switch to firefox or IE7. Thanks again for your help

 

 

mahesh.sidhu58@gmail.commahesh.sidhu58@gmail.com

Hello jeremy, 

 

                           Its good to mail you............... I am very much new to apex and visual force ..........

 

                           I have taken a date field in visual force page ........ but i am not able read it in apex class can you help me plzzzzzzzzz

PopcornappsPopcornapps

Hello jeremy,  

I have got the same question being how to read it in apex class. when the solution 1 is implemented (The Dummy input field Date Picker)

 

Whats the best approach to read the value in apex class. i tried it by get set methods.

ApexPages.currentPage().getParameters().get('theId');

 i am able to get the value for the first time but when i test the same for the second time i get the values which i previously entered. seems the values are chached in my browser. one more observation is when i delete my cookies and cache then test again i do get the new values.

 

Please help you have come accross the same thing previously

 

Thanks in Advance