标签：jquery javascript 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/

标签：jquery,javascript,datepicker
来源： https://codeday.me/bug/20190611/1222076.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。