title: How to get the value from datepicker in textfield
body: <p>I have a datepicker and you can select a data and that date apears in a textfield. But value in the textfield is empty, So how to get the value in the textfield? this is the textfield:</p>
  
  <pre><code>&lt;input name="form_inp1" title="" class="xforms-input xforms-control qmatic-dateslot xforms-incremental xforms-ap-default hasDatepicker" id="form_inp1" type="text" x-incremental="1" value=""/&gt;
  </code></pre>
  
  <p>and this is the script for the datepicker:</p>
  
  <pre><code>inp.datepicker({
       dateFormat: dateFormat,
       beforeShowDay: function (date) {
           var dt = $.datepicker.formatDate('yy-mm-dd', date)
           return [$('#form_one3 &gt; option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
       },  
       changeMonth: true,
       changeYear: true,
       showWeek: true,
       firstDay: 1,
       yearRange: "c-100:c+15",
       showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
  })
  </code></pre>
  
  <p>Thank you</p>
  
  <p>I have it now like this:</p>
  
  <pre><code>; (function ($) {
      $(function () {
          $("form.xforms-form").bind({
              XForms_Enrich: function (e) {
                  if ($.fn.datepicker) {
                      $("input.qmatic-dateslot", e.args.data).each(function () {
                          var inp = $(this);
                          if (inp.is(":disabled")) return;
                          var tabindex = inp.attr("tabindex");
  
                          var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'd-M-yy';
                          dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');
  
                          $("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);
  
                          var clearBtn = $('&lt;button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '"&gt;x&lt;/button&gt;').click(function () { inp.val(''); inp.change(); return false; });
                          inp.after(clearBtn);
  
  
                          inp.datepicker({
                          dateFormat: dateFormat,
  
  
                              beforeShowDay: function (date) {
                                  var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")                               
                                  return [$('#form_one3 &gt; option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
  
                              },                           
  
                              changeMonth: true,
                              changeYear: true,
                              showWeek: true,
                              firstDay: 1,
                              yearRange: "c-100:c+15",
                              showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                          })
  
                          var dateVal = $("#form_inp1").datepicker("getDate");
                          alert(dateVal);
  
                      });
                      $("#ui-datepicker-div").hide();
                  }
              }
          })
      })
  })(jQuery);
  </code></pre>
  
  <p>I try it like this:</p>
  
  <pre><code> inp.datepicker({
                          dateFormat: dateFormat,
  
                              beforeShowDay: function (date) {
                                  var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")                               
                                  return [$('#form_one3 &gt; option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
  
                              },
  
  
  
                              changeMonth: true,
                              changeYear: true,
                              showWeek: true,
                              firstDay: 1,
                              yearRange: "c-100:c+15",
                              showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                          })
  
                          var dateVal = $("#form_inp1").datepicker("getDate");
                          alert(dateVal);
  
  
  
                      });
                      $("#ui-datepicker-div").hide();
  </code></pre>
  
  <p>I do it now like this:</p>
  
  <pre><code> inp.datepicker({
                          dateFormat: dateFormat,
  
                              beforeShowDay: function (date) {
                                  var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")                               
                                  return [$('#form_one3 &gt; option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
  
                              },
  
  
                              onSelect: function (dateText, inst) {
                                  var dateval = $("#form_inp1").datepicker("getDate");
                                  alert(dateval);
                                 // alert(dateText);
                              },
                              changeMonth: true,
                              changeYear: true,
                              showWeek: true,
                              firstDay: 1,
                              yearRange: "c-100:c+15",
                              showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                          })
  </code></pre>
  
  <p>with the onSelect. But then I get for example this output: wed jul 29 00:00:00 UTC+0200 2015 as output. How to get the same ouput as in the textfield. So the output has to be: 29-7-2015.</p>
  
  <p>Thank you</p>
  
  <p>Oke, I have it now like this:</p>
  
  <pre><code>  onSelect: function (dateText, inst) {
                                  dateText = $("#form_inp1").val();
  
                              },
  </code></pre>
  
  <p>But If I look in the textfield</p>
  
  <pre><code>&lt;input name="form_inp1" title="" class="xforms-input xforms-control qmatic-dateslot xforms-incremental xforms-ap-default hasDatepicker" id="form_inp1" type="text" x-incremental="1" value=""/&gt;
  </code></pre>
  
  <p>value is still empty</p>
  
  <p>the actual value what in output is: 2015-08-04T00:00:00Z.</p>
  
  <p>But I get as selected value from datepicker this: 4-8-2015T00:00:00Z</p>
  
  <p>So how to get the correct returned date like this: 2015-08-04T00:00:00Z.</p>
  
  <p>Thank you</p>