How to get value from datepicker in text box

Question

I have a datepicker and you can select the data and that date appears in the text box. But the value in the text box is empty, So how to get the value in the text box? this is a text box:

<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 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

I now have something 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 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();

Now I do 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];

                            },


                            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 onSelect. But then I get, for example, this result: wed jul 29 00:00:00 UTC + 0200 2015 as an output. How to get the same output as in the text box. Thus, the output should be: 29-7-2015.

thank

Oke, now I like it:

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

                            },

But if I look in the text box

<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 remains empty

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

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

, : 2015-08-04T00: 00: 00Z.

Answer 1

, .val() , .val() . .

:

<!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>

, .

PS: , , : https://jqueryui.com/datepicker/

Answer 2

: $("#form_inp1").datepicker("getDate") Date

: $("#form_inp1").val()