我想在jQuery中做一个日期选择器。我把它们放在头标记中:
<link rel="stylesheet" type="text/css" media="screen" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(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>
从我在JavaScript中的这部分代码中调用日期选择器:
case "mhc":
if (mhc_overlay == null) {
mhc_overlay = new google.maps.HeatmapLayer();
}
if (!mhc_overlay_visible) {
mhc_overlay_visible = true;
$("#MHC").removeClass("menuLink");
$("#MHC").addClass("menuLink_selected");
visibleOverlays.push("mhc");
var content = "";
content += "<label for='startDate'>Date :</label>";
content += "<input name='startDate' id='startDate' class='date-picker' />";
filterWindowContent.push({ id: "mhc", label: label, content: content });
showFilterWindow();
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
addToCurrentOverlayList("loadedmhc", "mhc", "MHC Live Map");
}
break;
没有显示错误消息,只是日期选择器在选中时不显示日历。我想知道为什么会这样。
提前致谢。
答案 0 :(得分:0)
您需要在调用jQuery UI之前添加jquery库:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
答案 1 :(得分:0)
您正在文档中动态添加文本字段。所以你需要在showFilterWindow()函数之后调用datepicker()函数。我想在那之后它会正常工作。将您的jQuery datepicker函数放在一个单独的函数中。像这样:
function showdatepicker() {
$('.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));
}
});
}
并在showFilterWindow()函数之后调用此showdatepicker()函数。像这样:
case "mhc":
if (mhc_overlay == null) {
mhc_overlay = new google.maps.HeatmapLayer();
}
if (!mhc_overlay_visible) {
mhc_overlay_visible = true;
$("#MHC").removeClass("menuLink");
$("#MHC").addClass("menuLink_selected");
visibleOverlays.push("mhc");
var content = "";
content += "<label for='startDate'>Date :</label>";
content += "<input name='startDate' id='startDate' class='date-picker' />";
filterWindowContent.push({ id: "mhc", label: label, content: content });
showFilterWindow();
showdatepicker();
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
addToCurrentOverlayList("loadedmhc", "mhc", "MHC Live Map");
}
break;
我认为它会起作用。如果没有,请分享链接,以便我在线查看。