Javascript jQuery中的日期选择器不显示日历

我正在尝试用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>

$（函数（）{
$（'.date picker'）。日期选择器（{
变化月：对，
变化年：是的，
showButtonPanel：是的，
日期格式：“MM yy”，
onClose:函数（dateText，inst）{
var month=$（“#ui datepicker div.ui datepicker month:selected”）.val（）；
var year=$（“#ui日期选择器div.ui日期选择器year:selected”）.val（）；
$（此）.datepicker（'setDate'，新日期（年、月、1））；
}
});
});

从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; 

案例“mhc”：
if（mhc_overlay==null）{
mhc_overlay=新的google.maps.HeatmapLayer（）；
}
如果（！mhc_叠加图_可见）{
mhc_叠加_可见=真；
$（“#MHC”）.removeClass（“menuLink”）；
$（“#MHC”）.addClass（“选定菜单”）；
可视覆盖物。推送（“mhc”）；
var-content=“”；
内容+=“日期：”；
内容+=”；
push（{id:“mhc”，label:label，content:content}）；
showFilterWindow（）；
setMapTypeId（google.maps.MapTypeId.ROADMAP）；
addToCurrentOverlayList（“loadedmhc”、“mhc”、“mhc实时地图”）；
}
打破

没有显示错误消息，只是选择日期选择器时不显示日历。我不知道为什么会这样

---

提前感谢。

在调用jquery UI之前，您需要添加jquery库：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

---

您正在文档中动态添加文本字段。因此，需要在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));
        }
    });
}

 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; 

并在showFilterWindow（）函数之后调用此showdatepicker（）函数。像这样：

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

 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; 

案例“mhc”：
if（mhc_overlay==null）{
mhc_overlay=新的google.maps.HeatmapLayer（）；
}
如果（！mhc_叠加图_可见）{
mhc_叠加_可见=真；
$（“#MHC”）.removeClass（“menuLink”）；
$（“#MHC”）.addClass（“选定菜单”）；
可视覆盖物。推送（“mhc”）；
var-content=“”；
内容+=“日期：”；
内容+=”；
push（{id:“mhc”，label:label，content:content}）；
showFilterWindow（）；
showdatepicker（）；
setMapTypeId（google.maps.MapTypeId.ROADMAP）；
addToCurrentOverlayList（“loadedmhc”、“mhc”、“mhc实时地图”）；
}
打破

---

我想它会起作用的。如果没有，请共享一个链接，以便我可以在线查看。

放置调试器；在javascript代码中，使用F12键检查chrome中的异常。当选择日期选择器的输入字段时，有没有方法调用$function？当前，当selected时它不会启动看起来你把一些代码弄乱了，看起来你在日期选择器中加入了一些谷歌地图javascript你有jQuery吗？在代码中似乎只包含jQueryUI，而没有jQuery库。因为我试图做的是，如果该层被选中，它将弹出一个过滤器窗口。只有这部分代码调用showFilterWindow（），它将日期选择器作为内容。我想知道是否有其他方法/解决方案？它向我抛出了未捕获类型的错误消息error:Object[Object Object]在添加了上面的行之后没有方法'live'，这是因为您包括了jQuery版本1.11.0，.live（）方法在jQuery版本1.9中被删除，请看，是的，它可以工作。但它只显示要选择的月份和年份。还有什么方法可以添加日期吗？我认为您需要更改日期格式。您当前的日期格式是：dateFormat:'MM yy'，即使我添加了dd，它也不起作用。下面是链接：感谢共享JSFIDLE链接。我修改了您的JSFIDLE：我还在左侧添加了两个外部资源jQueryUICSS和jQueryUILibrary。我还修复了您使用的类的名称。“日期选择器”类中有一个额外的单引号，您是否介意为您添加的两个外部资源提供CDN？