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
PathikritPathikrit 

Localized Datepicker in Visualforce

Hello,

I was working on a custom datepicker in a visualforce that can display date in User locale. While going through some articles on the best way of implementing a datepicker with localization support I came across the JQuery Datepicker. I wanted to ensure that the datepicker displays date always in user locale. But while implementing I am unable to set the dateformat accordingly.

Here is my VF page code.. 
<apex:page controller="TestController" docType="html-5.0" sidebar="false">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript"> 
var userlang = window.navigator.language;
console.log(userlang);
$(function(){
    $("#datepicker").datepicker({
        formatDate:'dd-mm-yyyy',
        changeMonth:true,
        changeYear:true
    });
});

</script>
<apex:form >
<apex:pageBlock id="pgblk">
<input value="{!dateVariable}" type="text" id="datepicker"/>
</apex:pageBlock>
</apex:form>
</apex:page>
The controller doesn't have anything else than the getter & setter methods for the variable dateVariable. As you can see, I am hardcoding the format in the above code to 'dd-mm-yyyy'. But still during execution, I see the format as 'mm/dd/yyyy'. 

Can anyone help on this?

Thanks in advance!
Pathikrit
 
Best Answer chosen by Pathikrit
☯ BonY ☯☯ BonY ☯
Hi

i have made some changes on your code, it'll work 
  
<apex:page controller="TestController" docType="html-5.0" sidebar="false">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript"> 
var userlang = window.navigator.language;
console.log(userlang);
$(function(){

    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();

    $('#datepicker').datepicker({
        minDate: new Date(currentYear, currentMonth, currentDate),
        dateFormat: 'dd-mm-yy'
    });

});

</script>
<apex:form >
<apex:pageBlock id="pgblk">
<input value="{!dateVariable}" type="text" id="datepicker"/>
</apex:pageBlock>
</apex:form>
</apex:page>

if you have any question, let me know..

Thanks
boni.
 

All Answers

☯ BonY ☯☯ BonY ☯
Hi

i have made some changes on your code, it'll work 
  
<apex:page controller="TestController" docType="html-5.0" sidebar="false">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript"> 
var userlang = window.navigator.language;
console.log(userlang);
$(function(){

    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();

    $('#datepicker').datepicker({
        minDate: new Date(currentYear, currentMonth, currentDate),
        dateFormat: 'dd-mm-yy'
    });

});

</script>
<apex:form >
<apex:pageBlock id="pgblk">
<input value="{!dateVariable}" type="text" id="datepicker"/>
</apex:pageBlock>
</apex:form>
</apex:page>

if you have any question, let me know..

Thanks
boni.
 
This was selected as the best answer
PathikritPathikrit
Thanks much Boni.. this works.