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

VF page:

            var $j = jQuery.noConflict();
               changeYear: true,
               changeMonth: true,
               dateFormat: "mm/dd/yy"

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"/>

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.


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

  • You can also use a locale based static map - there are a few examples out there. They are pretty ugly though. I like the UserContext solution. – Caspar Harmer Jul 5 '15 at 18:13
  • @CaspNZ Yes that could be a way.. You are saying to create a map of user locale and the supported date format and then to get the date format based on logged in user. That dateformat can be passed to datepicker right? Yes creating such map would be a tedious considering 200 + countries. – the_phantom Jul 5 '15 at 19:54

I implemented similar to what Keith C suggested. I am passing the dateformat based on the usercontext to the datepicker. However the solution doesnt cover all the available date formats.


You can try using this :

$(function() {
$( "#expdate" ).datepicker();
$( "#anim" ).change(function() {
$( "#expdate" ).datepicker( "option", "showAnim", $( this ).val() );

<apex:inputText value="{!expdate}" id="expdate"/>

For more help use this link : https://jqueryui.com/datepicker/#animation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.