带有 JSON 文件的 Jquery Datepicker

发布于 2025-01-05 12:34:19 字数 1829 浏览 3 评论 0原文

我正在尝试使用 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"
        }
    ]
}

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

I am trying to use the jQuery Datepicker to display specific info from JSON file dependant on the date selected by a user. JSON file will contain an array with events for particular city and date. My problem is that I don't know how to use selected date to loop the JSON file.

My code is:

 <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 file, 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"
        }
    ]
}

Probably it is very simple and obvious but I can't handle this problem.
Any help would be appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

滥情空心 2025-01-12 12:34:19

您返回的对象可以被视为映射关联数组。考虑到这一点,地图中每个项目的看起来就像是格式为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 应该是在选定日期发生的事件的列表。

The object you're getting back can be treated as a map or associative array. With that in mind, the key for each item in the map looks like it's a date formatted yyyymd. Since you know what date was selected, you can build the correct key based on the parts of that date.

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

I'm not sure exactly how you want to build the HTML up, but with the above, entry should be a list of events occurring on the selected date.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文