月份选择器不工作答案

【问题标题】：month picker not working月份选择器不工作
【发布时间】：2013-10-16 07:25:32
【问题描述】：

您好，我无法显示放置在表格中的月份选择器。

<!DOCTYPE html>
<head>
    <script src="js/libs/jquery-1.9.1.js"></script>
        <link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/libs/jquery-ui-1.10.3.custom.min.js"></script>  
$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});
</script>
<script>
        window.onload = function () {
  PreLoadSection();
</script>
<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>


</head>
<body>
<div id="variables" name="variables" style="width:100%; overflow:auto; overflow: scroll;">          
    </div>  
</body>
</html>

上面是我的 htm 代码，下面是我的 .js 文件

function PreLoadSection()
{
 LoadSectionStratified();
}
function LoadSectionStratified() {
   $('#variables').append($('<table id="variables_table">'));
  $('#variables').append($('<tr>'));
  $('#variables').append('<th style="border: 10px">month picker</th>');
      $('#variables').append($('</tr>'));

   $('#variables').append($('<tr>'));
   AddDate_MonthYear_StratifiedSection();
 $('#variables').append($('</tr>'));
     $('#variables').append($('</table>'));
 $('#variables').trigger('create');
}

function AddDate_MonthYear_StratifiedSection() {
 table_html = '<td style="min-width: 200px;"><input name="name1" id="id1" value="" class="date-picker"></td>';
 $('#variables').append(table_html);
}

上面的代码是我如何实现它但它不起作用。我正在使用 Firefox 24 版。在窗口加载时，我调用调用 LoadSectionStratified 函数的预加载函数

【问题讨论】：

显示一个完整示例，包括包含的库和变量定义（control_id 等）。查看JavaScript error console 并告诉您在那里看到的错误以及它们指向的行。
datepicker 不是 jQuery 函数，它包含在 jQueryUI 中。你还记得在 jQuery 之后加载 jQueryUI 吗？您可能还想在 javascript 和 jquery 之后将 jQuery UI 作为标签附加到您的问题中。
@Juhana -我试图编辑代码希望它对你有意义，因为它是一个非常大的程序，并且大部分代码都引用了其他东西，使它成为一个获取所有内容的长链跨度>
@Eirinn-i 在 jQuery 之后包含了 jQueryUI，如上面编辑的代码所示
在我看来，您正试图在输入元素存在之前初始化日期选择器。你什么时候打电话给LoadSectionStratified()？

标签： javascript jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

我认为可能是因为它是新添加的 DOM 元素，请将您的 $('.date-picker') 重写为：

$(document).on('focus', '.date-picker', function() {
    $(this).datepicker({
       //Options
    });
});

它将侦听当前存在的任何$('.date-picker') 的整个文档。我已经用你的代码添加了一个演示，例如：

小提琴：http://jsfiddle.net/dHYfv/5/

正如Juhana 提到的，在将其附加到 DOM 时对其进行初始化会更干净，调整：

var opts = {
       changeMonth: true,
       changeYear: true,
       showButtonPanel: true,
       dateFormat: 'MM yy',
           onClose: function(dateText, inst) { 
              var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
              var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
              $(this).datepicker('setDate', new Date(year, month, 1));
           }
       };

function AddDate_MonthYear_StratifiedSection() {
    var table_html = '<td style="min-width: 200px;">'+ 
                     '<input name="name1" id="id1" '+ 
                            'value="" class="date-picker" />'+
                     '</td>';

    $('#variables').append(table_html)
                   .find('.date-picker')
                   .datepicker( opts );
}

小提琴：http://jsfiddle.net/dHYfv/6/

【讨论】：

这种方法给了我一些启发。现在为什么当我第一次单击月份日期控件时它什么也不做，但直到我单击控件外部然后返回之前有用吗？
我已经更改了答案，将click 更改为focus，这是因为它在您已经完成选择事件之后初始化了datepicker，焦点将允许它在点击完成。
在创建输入字段时只初始化一次日期选择器会更简洁。
@JoseLuke ??? JoseLuke - 我刚刚看到您提出了另一个问题，并且您从未接受/标记过您以前的任何问题，请不要像这样滥用 SO。 stackoverflow.com/questions/19399314/… 我还更正了 click 函数，因为它使用错误。
@MackieeE- 我不能忽视你们的任何事情，因为没有你们，我的职业生涯注定要失败！所以如果发布这个问题是一种冒犯，我很抱歉......我不知道这是滥用 SO。当你发布这个时，我正要接受你的回答。希望你仍然愿意帮助我，因为你的方法是我已经实施的，我想要同样的方法来控制时间（12 小时和 24 小时）。希望我的道歉被接受