当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - DatePicker in jQuery Not Showing Calendar

问题描述:

I am trying to do a date picker in jQuery. I put these within the head tag:

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

And from this part of my code in JavaScript is calling the date picker:

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;

There is no error message showing but just that the date picker does not show calendar when selected. I wonder why is it so.

Thanks in advance.

网友答案:

You are adding the textfield dynamically in the document. So you need to call the datepicker() function after showFilterWindow() function. I think after that it will work properly. Put your jQuery datepicker function in a separate function. Like this:

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

and call this showdatepicker() function after showFilterWindow() function. Like this:

 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; 

I think it will work. If not, please share a link so I can check it online.

网友答案:

You need to add jquery library before calling jQuery UI:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
分享给朋友:
您可能感兴趣的文章:
随机阅读: