title: Why My Code didn't display Date (dd-M-yy format) in the input field after selected?
body: <p>Below is my code.</p>
  
  <p>Firstly, run the index.php Then there is a dropdown list will display and need to select a value from the dropdown. so far, dropdown will display value 1 or 2. If you select 2 it will display the value that has been selected together with the "date" field called from the display-date.php and from the "date" field, you may choose the date from calendar which called using datepicker plugin.</p>
  
  <p>Now.. the problem is...I had select the date from calendar but the date selected didn't appear in the date input field. where am I wrong?</p>
  
  <p>Hope anyone could help me please... :) </p>
  
  <p>Thanks.</p>
  
  <p>Here is index.php </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Demo&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script&gt;
        function getData(str){
            var xhr = false;
            if (window.XMLHttpRequest) {
                // IE7+, Firefox, Chrome, Opera, Safari
                xhr = new XMLHttpRequest();
            } 
             else {
                // IE5/IE6
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
             if (xhr) {
                 xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
                         document.getElementById("results").innerHTML = xhr.responseText;
                     }
                  }
                  xhr.open("GET", "display-date.php?q="+str, true);
                  xhr.send(null);
              }
         }
       &lt;/script&gt;
       &lt;div&gt;
        &lt;?php
           echo '&lt;select title="Select one" name="selectcat" onChange="getData(this.value)"&gt;';        
           echo '&lt;option value="None"&gt;-- Select Option --&lt;/option&gt;';
           echo '&lt;option value="1"&gt;One&lt;/option&gt;';
           echo '&lt;option value="2"&gt;Two&lt;/option&gt;';
           echo '&lt;/select&gt;';
         ?&gt;
        &lt;/div&gt;
        &lt;br/&gt;&lt;br/&gt;
        &lt;p&gt;You selected: &lt;span id="results"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is display-date.php</p>
  
  <pre><code>&lt;?php
  $Q = $_GET["q"];
  echo $Q;
  ?&gt;
  
  &lt;?php
  if ($Q ==  '2'){
  ?&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
           #date_input{
              text-indent: -500px;
              height:25px; 
              width:200px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;input id ="date_input" dateformat="dd-M-yy" type="date"/&gt;
      &lt;span class="datepicker_label" style="pointer-events: none;"&gt;&lt;/span&gt;
  
      &lt;script type="text/javascript"&gt;
          $("#date_input").on("change", function () {
       $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", 
  top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : 
  ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
          });
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  &lt;?php
  }
  ?&gt;
  </code></pre>