Materialize CSSのDate Pickerのレイアウトを変更したい

前提・実現したいこと

Materialize CSSのDate Pickerをローカライズ（日本語化）しましたが、レイアウトが変なので変更したいです。（デフォルトのCSSを変更？）
MaterializeCSSのDate Pickerを日本語化するを参考にしました。
難しいレイアウトをしたいわけではなく、参考にしたサイトのレイアウトになれば十分なのです。特に緑色の背景の部分の見栄えが良くないので変更したいのです。

発生している問題・エラーメッセージ

該当のソースコード

jQuery
1  $(".datepicker").datepicker({
2    autoClose:true,
3    format: "yyyy-mm-dd",
4    i18n:{
5      months:  ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
6      monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
7      weekdays: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
8      weekdaysShort: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
9      weekdaysAbbrev: ["日", "月", "火", "水", "木", "金", "土"],
10      nextMonth: "翌月",
11      previousMonth: "前月",
12      labelMonthSelect: "月を選択",
13      labelYearSelect: "年を選択",
14      setDefaultDate:true,
15      cancel:'キャンセル',
16      clear: 'クリア',
17      done: 'OK',
18      close: "閉じる",
19      format: "yyyy-mm-dd",
20    }
21  });

補足情報（FW/ツールのバージョンなど）

Materialize CSS 1.0.0
Ruby on Rail 6
Docker

m.ts10806

2019/10/17 06:37

どのようにしたいのでしょうか。要件は具体的に書かれないとアドバイスしようがありません。また、ご自身が調べたこと試したことを記載してください。

m.ts10806

2019/10/17 06:39

なお、 https://materializecss.com/pickers.html のOptionsにおさまる範囲かどうかで難易度が飛躍的に変わります。

m.ts10806

2019/10/17 08:13

あと、提示された記事は四年前のもので1.0.0以前のバージョンである可能性が高く、そもそもPicker本体のレイアウト変更によって今の1.0.0のレイアウトになっている可能性も高いので、かなり難易度が高くなると思っています。 (1.0.0でMaterializeも結構仕様がかわってます) 色を緑から変更するくらいならcssの範疇なので難しくはないのですが

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

回答1件

自己解決

Date Pickerのレンダリングはmaterialize.jsというファイルにおいて、事実上JavaScriptでやっているようです。
しかもthis.dateTextEl.innerHTML = day + ", " + month + " " + date;というハードコーディングがされていて、オーバーライドしようとしても、月、日、曜日が構造的に分離されていなく文字列をパースし直さなければならず、面倒そうです。
直接ソースのmaterialize.jsを変更する方が簡単そうだけど、ソースをいじるのはバージョンアップなどのメンテナンス上気が引けます。
他に、有効な解決策も出なさそうなので、終了します。一応ソースを書き換えればこんな風にはできます。