[SalesForce] Issue with Jquery DatePicker in Visualforce page

I have been facing an issue with the usage of datepicker in my VF page.

VF page:

    <script>
    jQuery(function(){
            var $j = jQuery.noConflict();
            $j("input[id$=expdate]").datepicker({
               changeYear: true,
               changeMonth: true,
               dateFormat: "mm/dd/yy"
            });
          });
</script>

expdate is the id of the field.

<apex:pageBlockSectionItem rendered="{!ISNULL($CurrentPage.parameters.docId)}">
      <apex:outputLabel value="Expiration Date" for="expdate"/> 
      <apex:inputText value="{!expdate}" id="expdate"/>
    </apex:pageBlockSectionItem>

What should I do that the datepicker sets itself according to the user's locale settings? I would like the datepicker to be mm/dd/yy OR dd/mm/yy based on his user locale settings on Salesforce.

Best Answer

The simple way is to grab the data from the object that Salesforce itself populates but this is not a documented API and may change. Wrapping it in fallback code like this ensures your code doesn't completely die if the API is changed:

function getDateFormat() {
    try {
        return UserContext.dateFormat;
    } catch (e) {
        return 'mm/dd/yy';
    }
}

The more complicated approach is to take the results of the format of a known date in Apex and figure out the right formatting string from that and pass it to the client-side JavaScript.

Or just stick to the platform's default date picker. (Though that is only presented for SObject date fields.)

Related Solutions

[SalesForce] Datepicker widget location issue

When you click on the date field, an onfocus event is fired that calls the Datepicker javascript function. This does a variety of things, but the relevant part to your question is that it uses the window object to determine the Date Picker's position.

An inline visualforce page on the page layout is displayed in an iframe. The iframe has its own window object, so it is using that to determine the position. When you examine the Visualforce page on it's own, it is using the regular height and width to determine the window size, and not the iframe's.

What I would suggest to do is play with the height setting on the inline visualforce page to ensure there is no cutoff. 200 pixels seems to be the minimum to me.

[SalesForce] Bind datepicker value from visualforce page to controller

You can't do this with an outputlink - that simply generates an anchor tag, so when the user clicks the link their browser will carry out an HTTP GET request to the target URL. Any user input will be discarded. If you want to use a link rather than a button, you should use an apex:commandLink tag, as this will generate a postback of the form containing the user input, and the selected date will automatically be bound to the SFDC_Employee__c.Month__c field.

Depending on what you are trying to achieve with the Generate link, you may need an action method bound to the commandlink, if you want to save the SFDC_Employee__c record, for example you'd have the following:

Page:

<apex:page standardController="SFDC_Employee__c" extensions="payslipext" sidebar="true" showheader="true">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:inputField value="{!SFDC_Employee__c.Month__c}"/>

</apex:pageBlockSection>
<apex:commandLink value="Generate" action="{!generate}" id="page">
<apex:param value="{!dateName}" /></apex:outputlink>
</apex:pageBlock>
</apex:form>

</apex:page>

Controller:

public PageReference generate()
{
    // assumes the SFDC_Employee__c record is named 'employee'

    // update or insert the employee record
    upsert employee;

    // send the user to the payslip page for the employee record
    PageReference result=Page.PayslipPage;
    result.getParameters().put(employee.id);
    result.setRedirect(true);

    return result;
}

Best Answer

Related Solutions

[SalesForce] Datepicker widget location issue

[SalesForce] Bind datepicker value from visualforce page to controller

Related Topic