How to get the value from datepicker in textfield

Question

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:

<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=""/>

and this is the script for the datepicker:

inp.datepicker({
     dateFormat: dateFormat,
     beforeShowDay: function (date) {
         var dt = $.datepicker.formatDate('yy-mm-dd', date)
         return [$('#form_one3 > 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"
})

Thank you

I have it now like this:

; (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 = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').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 > 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);

I try it like this:

 inp.datepicker({
                        dateFormat: dateFormat,

                            beforeShowDay: function (date) {
                                var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")                               
                                return [$('#form_one3 > 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();

I do it now like this:

 inp.datepicker({
                        dateFormat: dateFormat,

                            beforeShowDay: function (date) {
                                var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")                               
                                return [$('#form_one3 > 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"
                        })

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.

Thank you

Oke, I have it now like this:

  onSelect: function (dateText, inst) {
                                dateText = $("#form_inp1").val();

                            },

But If I look in the textfield

<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=""/>

value is still empty

the actual value what in output is: 2015-08-04T00:00:00Z.

But I get as selected value from datepicker this: 4-8-2015T00:00:00Z

So how to get the correct returned date like this: 2015-08-04T00:00:00Z.

Thank you

Answer 1

with: $("#form_inp1").datepicker("getDate") you will get a Date object

with: $("#form_inp1").val() you will get a string

Answer 2

First, make sure you are assigning the datepicker to the right element, then select the input element and use .val() on the element.

Example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
    
    //selecting the button and adding a click event
    $("#alert").click(function() {
      //alerting the value inside the textbox
      var date = $("#datepicker").datepicker("getDate");
      alert($.datepicker.formatDate("dd-mm-yy", date));
    });
  });
  </script>
</head>
<body>
  <p>Date: <input type="text" id="datepicker"></p>
  <p>Alert the value: <button id="alert">Alert!</button>
</body>
</html>

I hope this helps you.

P.S.: Here is a link to the official documentation, in case you need it: https://jqueryui.com/datepicker/