Question

我有一个日期选择器，您可以在文本字段中选择数据和该日期。但是textfield中的值是空的，那么如何在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=""/>

这是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"
})

谢谢

我现在就这样：

; (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);

我这样试试：

 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();

我现在这样做：

 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"
                        })

使用onSelect。但后来我得到了这个输出：wed jul 29 00:00:00 UTC + 0200 2015作为输出。如何获得与文本字段相同的输出。所以输出必须是：29-7-2015。

谢谢

哦，我现在就这样：

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

                            },

但如果我查看文本字段

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

值仍为空

输出的实际值是：2015-08-04T00：00：00Z。

但是我从datepicker中得到了所选的值：4-8-2015T00：00：00Z

那么如何获得正确的返回日期如下：2015-08-04T00：00：00Z。

谢谢

Answer 1

with：$("#form_inp1").datepicker("getDate")您将获得一个Date对象

with：$("#form_inp1").val()你会得到一个字符串

Answer 2

首先，确保将datepicker分配给右边的元素，然后选择输入元素并在元素上使用`.val（）`。下面是一个例子。

示例：

＆＃13;

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

＆＃13;

我希望这会对你有所帮助。

P.S。：以下是官方文档的链接，以备不时之需：https://jqueryui.com/datepicker/

如何从textfield中的datepicker获取值

2 个答案: