質問: jQuery-uiのDatepickerでカレンダーを表示した際には、本日日付がハイライトされています。 (ui-state-highlightスタイルが指定されている) 今回、defaultDateオプションを利用してカレンダー表示時のデフォルト日付を本日ではない任意の日付にしたいと思ったのですが、defaultDateを指定するだけでは、ハイライトまではコントロールできませんでした。 どのようにすれば、カレンダーの初期値設定とハイライトを行うことができるでしょうか? 例)以下のように指定すると、カレンダーを開いた際に2018年の1月になっており、初期値の指定自体はうまくいっているようなのですが、ハイライトされていません。カレンダーの月をめくっていき、本日の月に行くと、本日日付がハイライトされたままになっています。 ``` $( ".selector" ).datepicker({ defaultDate: new Date(2018, 0, 1) }); ``` よろしくお願いいたします。
回答: 詳しく内部の実装を知っている訳では無いのですが defaultDate は、本日ではないので、本日日付のスタイルをオフにするわけではないようです。 なので、もしオフにしたいのであればそのように設定する必要があります。 指定日をハイライトするというような直接的なAPIは無いようですが、 各月の日付が表示される前にbeforeShowDay が設定のために呼び出されるのでそこでスタイル(正確にはクラス付け)の設定ができます。 beforeShowDayに設定する関数は、3つの値を持つ配列を返すことになっていて、 `[trueかfalse falseなら無効になる, クラス名文字列, ティップ文字列]` のような指定ができます。 カレンダーは `日付` のようになっていてこの場合 ``のように親要素にクラス名が設定されます。 (本日日付の場合は、`日付` のようになっています。関係無い部分は省略しています) なので(直接本日日付のようなaタグにクラス付けはできません)、 スタイルシートで ``` td.設定するクラス名 a { /* a.ui-state-highlight と同様のスタイル */ } ``` のようなスタイル付けをすればいいかと思います。 オプション設定するスクリプトは例えばこんな感じ ``` $(function() { $.datepicker.setDefaults( { defaultDate: new Date(2018, 0, 1), regional: "ja", beforeShowDay: function(date){ if(""+date == ""+new Date(2018,0,1)) return [true, "クラス名", "default day"]; else return [true, "",""];} }); $( "#datepicker" ).datepicker(); }); ``` `if(""+date == ""+new Date(2018,0,1))`で指定した日と同じか調べて 指定日なら`[true, "クラス名", "default day"]`を返す そうでないなら、`[true, "",""]` を返す(何もしない、標準のまま)