Trying to pass a date to Javascript with Visualforce is the wrong format

Question

I have a repeater which contains a list of dates from Apex. Within the visualforce page this is displayed correctly, I can see all of the dates as I would expect. I have recently extended this to include a command button which passes the date back to the custom controller in apex and then updates the record etc. This works fine.

More recently I have been trying to extend the functionality by using URL Hacking to prepopulate fields on a new record. It is mostly working with one key issue. Ultimately I cannot add the date to the URL using Javascript. Everything I have tried is incorrect. To explain a bit more (i've taken out some code to keep it concise):

Visualforce - Repeater

<apex:repeat rendered="{!currRecord.address__r.Type_Value__c= 2}" value="{!keyList}" var="newDate">
    <apex:outputText value="{0,date, EEEE dd MMMM yy}">
        <apex:param value="{!newDate}"/>
    </apex:outputText>
    <apex:commandButton value="Book {!newDate}"  reRender="hidden" onclick="alert({!newDate}); " >
         <apex:param name="setDate" id="param1" value="{!TEXT(newDate)}" assignTo="{!selectedDate}"/>
      </apex:commandButton>
</apex:repeat>

When viewing the above the command button label value is correct, as is the value passed to Apex. However the alert is unrecogniseable: 0.0000011234 (sort of thing).

I have tried alert(new Date({!newDate}) but the it returns "invalid date". I have also tried this suggestions but it always returns 01 Jan 1970. Javascript remoting and apex date design pattern. I have also tried the alert(!{TEXT(newDate)}); without luck.

Edit: Note the date is currently formatted as DD/MM/YYYY within the button etc and Day DD Month YYYY within the outputText. if I simply print {!newDate} then it appears in this format: Fri Sep 22 00:00:00 GMT 2017

Any help to pass the current date value from the repeater to the javascript would be appreciated.

Answer 1

Well, if you'd inspect the generated html you'd see something like this:

9 / 18 / 2017 = 0.000247 ;)

Actual results depend on your user's locale but you probably get the idea by now - you told JavaScript to divide some numbers (or subtract them I guess if it'd be 2017-09-18... you know the drill).

So, if you only need this date for URL hacking with URL composed in JavaScript - it should be enough to just wrap it in single quotes. In theory it'd show in there in same format as what SF expects for this user's locale in date pickers.

A bit more sophisticated way would be to try to do it right, use URLFOR, something like <a href="{!URLFOR($Action.Opportunity.New,null, [opp9=TEXT(newDate)])}" >New opp with close date</a>. It seems to produce only "2017-09-18" format though so won't work everywhere (although on the other hand - consistency isn't bad, right?)

Something here should give you ideas:

public with sharing class Stack192319{
    public List<Date> getKeyList(){
        return new List<Date>{
            System.today(),
            System.today() - 1,
            System.today() - Integer.valueOf(Math.random() * 100)
        };
    }
}

<apex:page controller="Stack192319" readonly="true">

<apex:form>
<apex:repeat value="{!keyList}" var="newDate">
    <p>
        <apex:outputText value="{0,date, EEEE dd MMMM yy}">
            <apex:param value="{!newDate}"/>
        </apex:outputText>
        <apex:commandButton value="Book {!newDate}" onclick="alert('{!newDate}');return false;"/>
        <a href="{!URLFOR($Action.Opportunity.New,null, [opp9=TEXT(newDate)])}" >New opp with close date (doesn't really work)</a>
        | or maybe timestamp? {!newDate.time}
    </p>
</apex:repeat>
</apex:form>
</apex:page>

P.S. Of course remember that URL hacking is not an officially supported API yadda yadda...