关于asp.net mvc 5:在DateTimePicker中用图标或颜色突出显示一天。 (MVC和Bootstrap)

Highlight a day with an icon or color in DateTimePicker. (MVC and Bootstrap)

我有一张桌子,如下图。

enter image description here

我希望"日期"列中的值突出显示一个圆圈
DateTimePicker(或特定颜色)。

enter image description here

可能吗 ? 最好的方式 ? 有什么例子吗?

谢谢

P.s. 我使用MVC和Bootstrap 3


在控制器中复制

1
2
3
4
5
6
7
8
9
10
11
12
public ActionResult GetArrayofDates()
            {
                DateTime[] d = new DateTime[]
                {
                    new DateTime(2019,9,27),
                    new DateTime(2019,9,25),
                    new DateTime(2015,7,27),
                    new DateTime(2019,5,5)
                };

                return View(d);
            }

这就是观点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
@{
    ViewBag.Title ="GetArrayofDates";
}
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<style>
    .highlight {
        background-color: #ff0000 !important;
        color: #ffffff !important;

    }
    .nothighlight{
        background-color:#fff7f7;
        color:#000000;
    }
</style>
GetArrayofDates
@{

    for (int i = 0; i < Model.Length; i++)
    {
        @Model[i]
    }
}



<script src="~/Scripts/jquery-3.3.1.min.js">
<script src="~/Scripts/jquery-ui-1.12.1.js">




    var dates = []

@foreach (var item in Model)
{

    //@: allow you to write javascritp/hhtml code inside c# code which you specific using @ which allow write c# inside javascrpit/html
    @:dates.push('@item.ToString("yyyy-M-dd")');
}
    console.log(dates);
    console.log(dates["0"])

    $("#calandar").datepicker({
        todayHighlight: true,
        changeYear: true,
        changeMonth: true,
        minDate: new Date(2010,1,1),
        beforeShowDay: function (date) {

            var calender_date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + ('0' + date.getDate()).slice(-2);
            console.log(calender_date)
            var search_index = $.inArray(calender_date, dates);

            if (search_index > -1) {
                return [true,'highlight','Employee Worked on this day.' ];
            } else {
                return [true, 'nothighlight', 'Employee did not Work on this day.'];
            }

        }
    });

这个完整的工作示例确保与服务器发送的Date格式匹配,并像我一样放入数组,一切都会好起来的。
并下载Jquery UI,并使用UI CSS,我想你知道