Use JavaScript functions on a Visualforce page

Question

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">
    {!date}
</apex:page>

Controller

public class dateTime_custom {
    public datetime getdate(){
        return DateTime.Now();
    }
}

Answer 1

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}" />
    </apex:outputText> 
</apex:page>

Answer 2

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:

<script>
    var d = new Date('{!date}');
    console.log('d: ' + d);
    console.log('day: ' + d.getDate());
</script>

Answer 3

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.