JQuery Date Picker does not show original text value

Question

I use jQuery Date Picker for one of the form fields - Date of Birth.

The field is created using PHP and will be populated with the user's original date of birth. When you click on a field, a widget appears that works great.

However, the text box does not display the original value, even if it is displayed in the source code of the browser. I am using Google Chrome.

The following is 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 HTML code (copied from source):

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

Please tell me what happened. Thanks.

Answer 1

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

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

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

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

Answer 2

Try using a different browser, such as firefox, to check if there is a browser compatibility problem and not sure about php, but on asp.net they have the option to set the visibility of the text field text to true

Answer 3

You should use setDate instead of setting the input value directly.

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

Answer 4

Based on Nick's answer, I realized that it works 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 solves half the problem. A value is displayed, but the date format after the selected date selection is erroneous.

My example uses a different date format (e.g. 01-Sep-2014), since I just copied the code that I finally started to work. I also had to break it down into getting the element and value, because at best it was sporadic when lining up.