function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SarfarajSarfaraj 

Issue with date picker. I am unable to select the year/month from the standard datepicker.

Hi 

I have created a custom VF page which opens a modal window with some date field in it. In the modal window I am unable to change the year/month from the dropdown. It is getting reset to the old value immediately. Below is my code,
  
<apex:page standardController="Account">
    <apex:includeScript value="https://code.jquery.com/jquery-2.1.1.min.js"/>
    <apex:includeScript value="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"/>
    <apex:stylesheet value="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css"/>
    <script>
  $(function() {
        $( "#modalWindow" ).dialog({
        autoOpen: false,
        height: 'auto',
        width: 600,
        modal: true,
        resizable: false 
        });
        
  });
    DatePicker.prototype.position = function (){
    for(var a=0,b=0,c=this.myElement;null!=c&&c!=this.calendarDiv.offsetParent;)
        a+=c.offsetLeft-c.scrollLeft,b+=c.offsetTop-c.scrollTop,c=c.offsetParent;
    b=getObjY(this.myElement)+this.calendarDiv.offsetHeight>Sfdc.Window.getScrollY()+Sfdc.Window.getWindowHeight()?getObjY(this.myElement)-(this.calendarDiv.offsetHeight+120):getObjY(this.myElement)-90;
    c="left";
    LC.isRtlPage()&&(c="right",a=this.calendarDiv.offsetParent.offsetWidth-a-this.myElement.offsetWidth);
    this.shim.setStyle(c,a+"px");
    this.shim.setStyle("top",b+"px");
    }
  </script>
  <style>
   .datePicker
      {
          z-index: 2000;
      }

  </style>
    <apex:pageBlock >
        <apex:pageBlockSection >
            <apex:outputField value="{!Account.Name}"/>
        </apex:pageBlockSection>
        <a href="#" onclick="$('#modalWindow' ).dialog('open');">open</a>
    </apex:pageBlock>
    <div id="modalWindow">
        <apex:form >
            <apex:pageBlock >
                <apex:pageBlockSection >
                    <apex:inputField value="{!Account.SLAExpirationDate__c}"/>
                </apex:pageBlockSection>
                <apex:pageBlockButtons >
                    <apex:commandButton value="Save" action="{!save}" oncomplete="$('#modalWindow' ).dialog('close');" reRender="none"/>
                </apex:pageBlockButtons>
            </apex:pageBlock>
        </apex:form>
    </div>
</apex:page>

--Akram
Best Answer chosen by Sarfaraj
JeeTJeeT
I have gone through some Blogs:
May these contributions will help to achieve your requirement
http://improveit360.blogspot.in/2010/09/gotchas-using-jqueryui-to-make-popups.html
http://cloudforcedev.blogspot.in/2012/04/issue-with-salesforce-datepicker-when.html
Actual issue is with the z-index, seems you need to play arround modifying this value 
 

All Answers

JeeTJeeT

Hi Akram,
I have copied the same code and ran it.(i ran this on Chrome browser) it hold the last selected date from date picker.
The issue might be with the browser. please verify.
If you could explain more what you trying to achieve !! i may help you.
SarfarajSarfaraj
Are you able to change the year from the year dropdown?
JeeTJeeT
Try Using this 
<apex:page standardController="Account">
    <apex:stylesheet value="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css"/>
    <apex:includeScript value="https://code.jquery.com/jquery-2.1.1.min.js"/>
    <apex:includeScript value="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"/>
    <apex:pageBlock >
        <apex:pageBlockSection >
            <apex:outputField value="{!Account.Name}"/>
        </apex:pageBlockSection>
        <a href="#" onclick="$('#modalWindow' ).dialog('open');">open</a>
    </apex:pageBlock>
    <div id="modalWindow">
        <apex:form >
            <apex:pageBlock >
                <apex:pageBlockSection >
                    <apex:inputField id="expDate" value="{!Account.SLAExpirationDate__c}" showDatePicker="false"/>
                    <!-- input type="text" value="{!Account.SLAExpirationDate__c}" id="datepick" onchange="$('[id$=expDate]').val($(this).val());" /> -->
                </apex:pageBlockSection>
                <apex:pageBlockButtons >
                    <apex:commandButton value="Save" action="{!save}" oncomplete="$('#modalWindow' ).dialog('close');" reRender="none"/>
                </apex:pageBlockButtons>
            </apex:pageBlock>
        </apex:form>
    </div>
   <script>
      $('[id$=expDate]').datepicker();      
      //$( "#datepick" ).datepicker(); 
      $(function() {
            $( "#modalWindow" ).dialog({
            autoOpen: false,
            height: 'auto',
            width: 600,
            modal: true,
            resizable: false 
            });
      });
  </script>
</apex:page>

 
SarfarajSarfaraj
Hi Jeet

Thanks a lot for your effort. I know how to bind and use custom datepicker. I am not looking for this kind of solution. I want to use the standard datepicker provided by salesforce. Only issue I am facing is that it is getting reset after selecting any value from the select list.

--Akram
JeeTJeeT
Hi Akram,
Yes there are some issues with the date-picker on the pop-up dialog. You can customize jquery datepicker which will have same feature like SF standard on modify my above code with 
$('[id$=expDate]').datepicker({ changeMonth: true, changeYear: true });

Hope this will work for you.
SarfarajSarfaraj
Thanks again Jeet for all your effort. I have already implemented a custom datepicker using xdsoft datetimepicker. This one is more robust than the jquery version. This one meets all my requirement. But this creates one serious user interface issue. For only this page the date picker will be differrent than all other pages. The effort needed to make this one similer to SF one is not worthy. If you have anything specific to my issue please let me know.
JeeTJeeT
I have gone through some Blogs:
May these contributions will help to achieve your requirement
http://improveit360.blogspot.in/2010/09/gotchas-using-jqueryui-to-make-popups.html
http://cloudforcedev.blogspot.in/2012/04/issue-with-salesforce-datepicker-when.html
Actual issue is with the z-index, seems you need to play arround modifying this value 
 
This was selected as the best answer
SarfarajSarfaraj
Yeah zindex needs to be adjusted. you may look into my original code. It was taken care of. Also the position of the date picker needs to be readjusted. That is handled by this section of my code, 
DatePicker.prototype.position = function (){
    for(var a=0,b=0,c=this.myElement;null!=c&&c!=this.calendarDiv.offsetParent;)
        a+=c.offsetLeft-c.scrollLeft,b+=c.offsetTop-c.scrollTop,c=c.offsetParent;
    b=getObjY(this.myElement)+this.calendarDiv.offsetHeight>Sfdc.Window.getScrollY()+Sfdc.Window.getWindowHeight()?getObjY(this.myElement)-(this.calendarDiv.offsetHeight+120):getObjY(this.myElement)-90;
    c="left";
    LC.isRtlPage()&&(c="right",a=this.calendarDiv.offsetParent.offsetWidth-a-this.myElement.offsetWidth);
    this.shim.setStyle(c,a+"px");
    this.shim.setStyle("top",b+"px");
    }