带有JSON文件的Jquery Datepicker

时间:2012-02-15 22:17:49

标签: javascript jquery json jquery-ui jquery-ui-datepicker

我正在尝试使用jQuery Datepicker来显示JSON文件中的特定信息,具体取决于用户选择的日期。 JSON文件将包含一个包含特定城市和日期事件的数组。我的问题是我不知道如何使用选定的日期来循环JSON文件。

我的代码是:

 <script type="text/javascript">
    $(document).ready(function(){
    $('#datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            inline: true,
            minDate: new Date(2012, 1 - 1, 1),
            maxDate:new Date(2012, 12 - 1, 31),
            altField: '#datepicker_value',
            onSelect: function(){
                var day1 = $("#datepicker").datepicker('getDate').getDate();                 
                var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;             
                var year1 = $("#datepicker").datepicker('getDate').getFullYear();
         fullDate = year1 + "" + month1 + "" + day1;
    var proba = "<center><p>:<b>  "+fullDate+"</b></p></center>";
       var output = $.getJSON("example.json",  function(data){

    $.each(data, function(index,entry){  ??? 
    $('#page_output').append(html);
    });
    });

                $('#page_output').html(proba, output);

            }
         });
    });

    </script>

JSON文件,example.json:

{
    "2012215":[{
            "Something1":"Blablabla",
            "Title1":"Blabla",
            "Description":["Blablabla",
                "Blablablabl"
            ],
            "Something2":"Blablabla",
            "Title2":"Blablabla"
        }
    ],
    "201231":[{
            "Something3":"Blaasdasdblabla",
            "Title3":"Blabla",
            "Description":["Blablabla",
                "Blablablabl"
            ],
            "Something4":"Blablabla",
            "Title4":"Blablabla"
        }
    ]
}

可能它非常简单明了但我无法解决这个问题。 任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

您要回来的对象可以视为地图关联数组。考虑到这一点,地图中每个项目的看起来都是格式化yyyymd的日期。由于您知道选择了哪个日期,因此您可以根据该日期的各个部分构建正确的密钥。

$(document).ready(function(){
    $('#datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            inline: true,
            minDate: new Date(2012, 1 - 1, 1),
            maxDate:new Date(2012, 12 - 1, 31),
            altField: '#datepicker_value',
            onSelect: function(){
                var day1 = $("#datepicker").datepicker('getDate').getDate();                 
                var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;             
                var year1 = $("#datepicker").datepicker('getDate').getFullYear();
                var fullDate = year1 + "" + month1 + "" + day1;
                var proba = "<center><p>:<b>  "+fullDate+"</b></p></center>";
                $.getJSON("example.json",  function (data){
                    $.each(data["" + year1 + month1 + day1], function(index, entry)
                        /* Process the event and build HTML */
                        $('#page_output').append(html);
                    });
                });
            }
         });
});

我不确定您想要如何构建HTML,但如上所述,entry应该是所选日期发生的事件列表。