jQuery中的DatePicker不显示日历

DatePicker in jQuery Not Showing Calendar

本文关键字：显示 日历 DatePicker 中的 jQuery      更新时间：2023-09-26

我正试图在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;

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

提前谢谢。

您正在文档中动态添加文本字段。因此，您需要在showFilterWindow（）函数之后调用datepicker（）函数。我认为在那之后它会正常工作。将jQuery日期选择器函数放在一个单独的函数中。像这样：

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;

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

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
相关文章：