I am using a DateTime field on a Visualforce page which gets its value from the controller. I would like to know if I can use JavaScript or jQuery code directly on the Visualforce page to convert this DateTime Field (DT) to a date field on page load.

I know the JavaScript function is DT.format('MMMM d, yyyy'), but I need some idea on how to implement this.

My Page

<apex:page controller="dateTime_custom">


public class dateTime_custom {
    public datetime getdate(){
        return DateTime.Now();
  • Any specific reason why you want to convert it in javascript? You could convert the datetime to date in apex and format it to string and associate it to a getter variable and access it in javascript. This is a better approach as you wouldn't have to worry about the locale,dateformate etc.. – Sam Apr 28 '15 at 13:17
  • ya I was able to convert in apex but interested in knowing if there is any simple solution using javascript – sf_user Apr 28 '15 at 13:19

Use the param tag and customize the output to the date format. This works. Happy coding.

<apex:page controller="dateTime_custom">
    <apex:outputText value="{0, date, MMMM d','  yyyy}">
        <apex:param value="{!date}" />
  • 1
    Could you please elaborate on your answer and provide a sample? – Sam Apr 28 '15 at 13:22
  • Hi Suri. Can you please show that on above example as I am new to this community – sf_user Apr 28 '15 at 13:22
  • <apex:page controller="dateTime_custom"> <apex:outputText value="{0, date, MMMM d',' yyyy}"> <apex:param value="{!date}" /> </apex:outputText> </apex:page> I paseted the same in answer block but it is not showing up. so weired. – Suresh Apr 28 '15 at 13:23
  • 1
    Thanks Suri. That worked perfectly. Even though not javascript, I am looking to do this from VF page just as you shown in your example. Thanks :) – sf_user Apr 28 '15 at 13:24
  • Hi Suri, Would like to know if we can change the time zone from GMT to other timezone using your code as I am getting only GMT eventhough input is GMT+5:30. Thanks – sf_user Apr 28 '15 at 14:14

If you want to assign your apex date variable to some javascript variable you can do it just by creating a new Date with your apex variable as parameter:

    var d = new Date('{!date}');
    console.log('d: ' + d);
    console.log('day: ' + d.getDate());
  • I tried the following and got this. <script> var d = new Date('{!date}'); console.log('d: ' + d); console.log('day: ' + d.getDate()); alert(d.getDate()+'/'+ d.getMonth()+'/'+d.getYear()); </script> but I recevied the o/p has 28/3/115 what I am I doing wrong – Suresh Apr 28 '15 at 13:35

This should generally work:

var date = new Date("{!date}");

However, this may not be fully compatible with all browsers, so I'd suggest using DateTime.getTime() in Apex Code, then using that value:

var date = new Date({!timestamp});

You could also serialize it into JSON, then use native JSON methods in the browser to parse. Only modern browsers support this method.

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.