gpt4 book ai didi

javascript - 月份选择器不工作

转载 作者:行者123 更新时间:2023-11-28 01:53:50 26 4
gpt4 key购买 nike

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

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

最佳答案

我认为这可能是因为它是新附加的 DOM 元素,请将您的 $('.date-picker') 重写为:

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

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

fiddle :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 );
}

fiddle :http://jsfiddle.net/dHYfv/6/

关于javascript - 月份选择器不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19397467/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com