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

Question

I have a table like the picture below.

I would like the value in the Date column to be highlight with a circle in the DateTimePicker (or in specific color).

Is it possible ? The best way ? Any examples ?

Thank you

P.s. I use MVC and Bootstrap 3

Sounds like it's possible by using `beforeShowDay`. You can pass dates from controller action as date array and use `inArray` to check and highlight those dates. Can you show current datepicker & controller method code then? — Tetsuya Yamamoto, Aug 09 '18 at 08:26
At the moment haven't code, I'm wondering if is possibile and how solve. Thank you for your replay.. — Alan392, Aug 09 '18 at 08:34
[This post](https://stackoverflow.com/questions/28782684/how-to-highlight-specific-dates-in-bootstrap-datepicker) and [this](https://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine) may help you to get started. You can always edit the post which provides what you're already tried to accomplish date highlighting. — Tetsuya Yamamoto, Aug 09 '18 at 08:43

score 1 · Accepted Answer · answered Sep 27 '19 at 10:19

Copy this in Controller

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

And This is The View

@{
    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>
<h2>GetArrayofDates</h2>
@{

    for (int i = 0; i < Model.Length; i++)
    {
        <h3>@Model[i]</h3>
    }
}
<div id="calandar">

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



    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.'];
            }

        }
    });        








</script>

This full working example makes sure to match the format of the Date sent from the server and put into array as I did and everything will be okay. and Download Jquery UI, and use UI CSS, I suppose you know that

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

1 Answers1