javascript – 如何从textfield中的datepicker获取值

我有一个日期选择器,您可以在文本字段中选择数据和日期.但是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.

谢谢

解决方法:

首先,确保将datepicker分配给右边的元素,然后选择input元素并在元素上使用`.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>

我希望这可以帮助你.

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

上一篇:Android:日历弹出窗口中的日期选择器


下一篇:android – 更改DatePicker标题文本颜色