jQuery Date Picker Doesn't Show Original Text Value

Question

I'm using jQuery's Date Picker for one of my form's field - Date of Birth.

The field is generated using PHP and will be populated with the user's original date of birth. Clicking the field brings up the widget, which it does perfectly fine.

However, the textbox doesn't show the original value, even though it appears in the browser's source code. I'm using Google Chrome.

The following is the jQuery code:

$(function()
{
    $("#DatePicker").attr("readonly","readonly");

    $("#DatePicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "1950:+10"
    });

    $("#DatePicker").datepicker("option","dateFormat","dd MM yy");
});

This is the PHP code:

echo "<INPUT TYPE=\"TEXT\" NAME=\"$FieldName\" VALUE=\"$OriginalData\" ID=\"DatePicker\" CLASS=\"FullLength\">";

And the following is the HTML code (copied from the source code):

<INPUT TYPE="TEXT" NAME="DateOfBirth" VALUE="18 August 2012" ID="DatePicker" CLASS="FullLength">

Please tell me what's wrong. Thank you.

Answer 1

I'm not sure why, but this line is clearing the value:

$("#DatePicker").datepicker("option","dateFormat","dd MM yy");

Try adding the option like this if possible, worked for me in Firefox and Chrome:

$("#DatePicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd MM yy"
});

Answer 2

Try using another browser like firefox to check if its a browser compatibility issue, not sure about php but on asp.net their is an option to set the textbox text visibility to true