jQuery UI Datepickerで、選択不可でも「今日」の印を表示させる方法

閲覧ありがとうございます。

下記サイトを参考に、選択不可の日を設定していますが、「今日」を表す印まで消えてしまいます。
選択不可かつ「今日」であることが分かるよう、
「今日」を表す「黄色い枠線」のみを、選択不可の状態でも表示させる方法
がございましたら、教えていただけますと幸いです。
宜しくお願い致します。

▼Datepicker導入に際し参考にしたサイト
http://www.webdesign-fan.com/jquery-ui-datepicker

▼特定の日付を選択不可にする方法を参考にしたサイト
http://www.northwind.mydns.jp/samples/datepicker_sample7.php

▼今日が分かる状態（選択可能）

▼今日の印が消えてしまう状態（選択不可）

▼CodePen
https://codepen.io/0166_0166/pen/gJMXbM

HTML５
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" >
8</head>
9
10<body>
11	<div class="container">
12		<input type="text" id="datepicker">
13	</div>
14</body>
15<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
16<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
17<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
18<script>
19	$(function() {
20    // 祝日を配列で確保
21    var holidays = [ '2019-05-20', '2019-05-30' ];
22
23    $("#datepicker").datepicker({
24            // numberOfMonths: [1,2],
25            beforeShowDay: function(date) {
26            // 祝日の判定
27            for (var i = 0; i < holidays.length; i++) {
28                var htime = Date.parse(holidays[i]);    // 祝日を 'YYYY-MM-DD' から time へ変換
29                var holiday = new Date();
30                holiday.setTime(htime);                 // 上記 time を Date へ設定
31
32                // 祝日
33                if (holiday.getYear() == date.getYear() &&
34                    holiday.getMonth() == date.getMonth() &&
35                    holiday.getDate() == date.getDate()) {
36                    return [false, 'holiday'];
37                }
38            }
39            // 日曜日
40            if (date.getDay() == 0) {
41                return [false, 'sunday'];
42            }
43            // 土曜日
44            if (date.getDay() == 6) {
45                return [false, 'saturday'];
46            }
47            // 水曜日
48            if (date.getDay() == 3) {
49                return [false, ''];
50            }
51            // 平日
52            return [true, ''];
53        },
54    });
55});
56  </script>
57</html>

2019/05/21 追記

いただいた回答を参考に、選択不可でも「今日」の印を表示することができました。
選択不可の日はデフォルトで半透明になるスタイルが付けられていますが、
今日を表す線（今回の場合は黄色）を薄くさせないためにopacity: 1;にし、
薄くなった風の背景色と文字色は色を拾って再現しました。
背景は本来画像ですが、グラデーションで再現しました。

▼CodePen
https://codepen.io/anon/pen/GaOjdw?editors=1100

css
1.ui-widget-content .ui-datepicker-today {
2  opacity: 1 !important;
3}
4
5.ui-widget-content .ui-datepicker-today > .ui-state-default {
6  border: 1px solid #fad42e;
7  background: linear-gradient(to bottom, #F6FAFD 50%, #F8FCFF ,#F6FAFD);
8  color: #B9CDDD;
9  font-weight: bold;
10}

行動規範の内容に同意します

回答1件

ベストアンサー

こちらのCSSを追加するだけです。
「今日」を表す「黄色い枠線」のみを、選択不可の状態でも表示させるための
JavaScript側のオプションは存在しないようです。

CSS
1.ui-widget-content .ui-datepicker-today {
2  opacity: 1 !important;
3}
4
5.ui-widget-content .ui-datepicker-today > .ui-state-default {
6  border: 1px solid #fad42e;
7  background: #fbec88;
8  color: #363636;
9}