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
rv90rv90 

date picker auto open on page load.




While initial load of my page, the date picker is auto populating, i want to restrict it. Below is my code and screenshot for refrence . Please help me out





<apex:pageBlockSectionItem >
                            <apex:outputLabel value="From Date"></apex:outputLabel>
                            <apex:inputText value="{!fromDate}" id="fromDate" styleClass="fromdatepickerctl"/>
                        </apex:pageBlockSectionItem>

                        <apex:pageBlockSectionItem >
                            <apex:outputLabel value="To Date"></apex:outputLabel>
                            <apex:inputText value="{!toDate}" id="toDate" styleClass="todatepickerctl"/>
                        </apex:pageBlockSectionItem>

<script type="text/javascript">
        var j$ = jQuery.noConflict();
        
        j$(document).ready(function(){
            var d = new Date();
            var da = new Date();
            da.setDate(da.getDate() + 28);
            var dayCount = da.getDay();
            if( dayCount != 0 ){
                var remainingCount = 7 - dayCount;
                da.setDate(da.getDate() + remainingCount);
            }
            var defaultDate = new Date(da);
    
            j$('.fromdatepickerctl').datepicker({
                dateFormat: 'dd-mm-yy',        
                minDate: 1,
                daysOfWeekDisabled: [1,2,3,4,5,6],
                startDate: getTodayDate()
                
            });
            j$('.todatepickerctl').datepicker({
                daysOfWeekDisabled: [1,2,3,4,5,6],
                autoclose: true,
                startDate: getTodayDate()
                
            });
            j$('.fromdatepickerctl').datepicker('update', defaultDate);            
            j$('.todatepickerctl').datepicker('update', defaultDate);
    
         
        function getTodayDate() {
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth() + 1; //January is 0!
            var yyyy = today.getFullYear();

            if (dd < 10) {
                dd = '0' + dd
            }

            if (mm < 10) {
                mm = '0' + mm
            }

            today = mm + '/' + dd + '/' + yyyy;
            //document.write(today);
            return today;
        }
        
        
            
    
    </script>


User-added image

 
Best Answer chosen by rv90
NagendraNagendra (Salesforce Developers) 
Hi,

The popup is being shown because by default the date field is being focussed as soon as the page is loaded. May I suggest you please add the below lines of code in your visual force page which should do the trick.
<Script>
function setFocusOnLoad() {}
</Script>
Please let us know if this helps.

Mark this as solved if it's resolved so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.

Thanks,
Nagendra
 

All Answers

NagendraNagendra (Salesforce Developers) 
Hi,

The popup is being shown because by default the date field is being focussed as soon as the page is loaded. May I suggest you please add the below lines of code in your visual force page which should do the trick.
<Script>
function setFocusOnLoad() {}
</Script>
Please let us know if this helps.

Mark this as solved if it's resolved so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.

Thanks,
Nagendra
 
This was selected as the best answer
rv90rv90
it worked. Thanks Nagendra for ur help. :)
Mustafa JhabuawalaMustafa Jhabuawala
Nagendra,

Can you please explain the logic behind writing setFocusOnLoad method in script.

I can guess that jQuery UI plugin calls setFocusOnLoad method when plugin is initialised.

But I am not able to find that in their documentation. Can you help me out on this ?