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

Answer 3

You should use setDate instead of setting input value directly.

$("#birthday").datepicker()
.datepicker("option", "dateFormat", 'dd.mm.yy')
.datepicker('setDate', '<?= $humanoid->getBirthday()->format('d.m.Y') ?>');

Answer 4

Based on Nik's answer this is how I got it to work in "all javascript"

$(".popup-date").each(function(){
    var ele = $(this);
    var v = ele.val();
    ele.datepicker().datepicker("option", "dateFormat", "dd-M-yy").datepicker("setDate", v);
    });

The accepted answer only solves half the problem. The value displays, but the format of the date after being picked by the date picker is then wrong.

My example uses a different date format (eg. 01-Sep-2014) as I just copied the code I finally got to work. I also had to break it down into getting the element and the value as it was sporadic at best when in-lined.