01.<!DOCTYPE html>
02.<html>
03.<head>
04.<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
07.
08.<style>
09..highlight a{
10. background-color: #f22974 !important;
11. color: #ffffff !important;
12.}
13.</style>
14.</head>
15.<body>
16.
17.<!-- Text box element -->
18.<input type='text' id='datepicker'>
19.
20.<script type='text/javascript'>
21.
22.
23.
24.var highlight_dates = ['1-5-2020','11-5-2020','18-5-2020','28-5-2020'];
25.
26.$(document).ready(function(){
27.
28.
29. $('#datepicker').datepicker({
30. beforeShowDay: function(date){
31. var month = date.getMonth()+1;
32. var year = date.getFullYear();
33. var day = date.getDate();
34.
35.
36. var newdate = day+"-"+month+'-'+year;
37.
38.
39. var tooltip_text = "New event on " + newdate;
40.
41.
42. if($.inArray(newdate, highlight_dates) != -1){
43. return [true, "highlight", tooltip_text ];
44. }
45. return [true];
46. }
47. });
48.});
49.
50.</script>
51.
52.
53.</body>
54.
55.</html>
