为什么日期没有在datetimepicker中突出显示?

时间:2017-10-03 07:31:00

标签: javascript jquery css twitter-bootstrap datetimepicker

我希望来自JSON文件的所选日期应突出显示为DateTimePicker上的红色背景。

我使用Jquery的ajax调用传递日期。日期采用MMDDYYYY格式存储在JSON文件date.json中。

我的代码 JS 就是这样:

$(function () {
    $('#datetimepicker5').datetimepicker({
        defaultDate: "10/01/2017",
        disabledDates: [ moment("10/05/2017"),
            new Date(2018, 11 - 1, 21),
            "11/22/2017", "11/23/2017"]
    });
});

$.ajax({
    type: "GET",
    url: "date.json",
    success: function (data)
    {
        var count = Object.keys(data).length;
        for(var i=0;i<count;i++)
        {
            var a = data[i].date;
            $("#datetimepicker5").datetimepicker({
                beforeShowDay: function(a)
                {
                    var Highlight = a;
                    if(Highlight){

                        return[true, "Highlighted", Highlight];
                    }
                    else {
                        return ['true','',''];
                    }
                }
            });
            {
            }
        }
    },
},
    dataType: "json"
});

CSS 代码是这样的:

.Highlighted a{
    background-color : Green !important;
    background-image :none !important;
    color: White !important;
    font-weight:bold !important;
    font-size: 12pt;
}

td.highlight {
    background-color: red;
    border: 1px blue solid;
}

以下是 JSON 数据:

[
    {"date":"10/05/2017"},
    {"date":"10/09/2017"},
    {"date":"10/02/2017"},
    {"date":"10/10/2017"}
]

1 个答案:

答案 0 :(得分:0)

对于你的JS我刚刚纠正了缩进并发现了问题。

$(function () {
    $('#datetimepicker5').datetimepicker({
        defaultDate:   '10/01/2017',
        disabledDates: [ 
            moment('10/05/2017'),
            new Date(2018, 11 - 1, 21),
            '11/22/2017', 
            '11/23/2017'
        ]
    });
    $.ajax({
        type:     'GET',
        url:      'date.json',
        dataType: 'json',
        success:  function(data) {
            var count = Object.keys(data).length;
            for(var i=0; i<count; i++) {
                var a = data[i].date;
                $('#datetimepicker5').datetimepicker({
                    beforeShowDay: function(a) {
                        var Highlight = a;
                        if(Highlight) {
                            return [
                                'true', 
                                'Highlighted', 
                                'Highlight'
                            ];
                        }
                        else {
                            return [
                                'true',
                                '',
                                ''
                            ];
                        }
                    }
                });
            }
        }
    });
});