Question

我正在尝试动态创建两个日期选择器并为每个日期选择器提供一系列日期以突出显示，它正在工作我可以看到我的两个日期选择器，但它们都具有相同的突出显示日期（最后指定的日期），即使我是为每一个提供不同的日期以突出显示。

<!DOCTYPE html>
<html>
    <head>
        <title>Vehicles Tracking</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<link rel="stylesheet" href="jquery-ui-1.8.16.custom.css" type="text/css"/>
<script src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
var date = new Date();
jQuery(document).ready(function() { 
    var disabledDays = new Array();
    disabledDays[0] = ["2014-1-9", "2014-1-10", "2014-1-12", "2014-1-13"];
    disabledDays[1] = ["2014-2-9", "2014-2-10", "2014-2-12", "2014-2-13"];
    for(var i=0; i<2;i++){
        $("#date").append('<input type="text" id="dp'+i+'" />&nbsp;<span id="choseDate'+i+'"></span></br>');
        var fromArrayDisableDays = disabledDays[i];
        $( "#dp"+i).datepicker({ 
        buttonImage: 'images/calendar.gif',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
        beforeShowDay: function(date){
                 var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
                 for (i = 0; i < fromArrayDisableDays.length; i++) {
                    if($.inArray(y + '-' + (m+1) + '-' + d,fromArrayDisableDays) != -1) {
                        return [true, 'ui-state-active', ''];
                    }
                }
                return [false];
        },
        onSelect: function(dateText, inst) {
            $("#choseDate"+i).text(dateText);
         }
    });
    }
});
</script>
    </head>
    <body>
        <div id="date">

        </div>
    </body>
</html>

我正在使用的代码如下，这是一个测试链接：http://jsfiddle.net/9kLrx/ 谁能告诉我怎么解决这个问题？

感谢。

动态创建jQuery Datepickers并突出显示日期

0 个答案: