Highlight a day with an icon or color in DateTimePicker. (MVC and Bootstrap)
我有一张桌子,如下图。
我希望"日期"列中的值突出显示一个圆圈
DateTimePicker(或特定颜色)。
可能吗 ? 最好的方式 ? 有什么例子吗?
谢谢
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,我想你知道