【jQuery】datepicker CSSでカスタマイズする方法

シュウ

今回は【jQuery】datepicker CSSでカスタマイズする方法について
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
jQueryの基本的な知識があり、カレンダーのレイアウト変更を目的とした人向けの記事です
今回はdatepickerのカスタマイズについて解説しております。

[記事の内容]

datepickerについて

datepickerとは、JavaScript（JS）を使ってウェブページ上に日付を選択するためのカレンダー機能を実装するためのツールのことです。

主に、「予約希望日」や「相談希望日」など、日付を用いる際に使用します。
入力欄をクリックすると、自動的にカレンダーが表示され、そこから日付をクリックすると、その日付が入力欄に自動的に入力される、というものが一般的です。

datepickerの使い方

datepickerは、かつて非常に広く使われていたライブラリで、高機能でカスタマイズ性が高いのが特徴です。
主な使い方の流れは以下になります。

●ファイルの読み込み: 1必要なJavaScriptファイルとCSSファイルをHTMLに読み込む。

●formに記述: 2日付を入力させたいHTMLのinput type="text" id="date"要素にIDなどの識別子を付ける。

●datepicker()を記述: 3JavaScriptコードで、そのIDを持つ要素に対してdatepicker()のようなメソッドを呼び出す。

<!---②--->
日付を選択: <input type="text" id="date">

<!---①--->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<!---③--->
<script>
$(function() {
  $( "#date" ).datepicker({
    changeMonth: true,
    changeYear: true
  });
});
</script>

jQuery UIもjQuery本体と合わせて更新することをお勧めします。
現在、jQuery UIの安定版の最新バージョンは1.13.2です。

CSSでのカスタマイズについて

jQuery UIのテーマを読み込んだ上で、さらに細かい部分を自分で変更したい場合は、独自のCSSファイルを作成し、それをjQuery UIのCSSファイルの後に読み込むことで、スタイルを上書きできます。
カスタマイズのCSSは以下になります。

#ui-datepicker-div {padding: 1rem !important;}
.ui-datepicker-calendar th span {
	color: #ccc !important;
	font-size: 1.2rem !important;
}

.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default, 
.ui-button, html 
.ui-button.ui-state-disabled:hover, html 
.ui-button.ui-state-disabled:active {
    border: 1px solid #fff !important;
    background: #fff !important;
    font-weight: normal;
    color: #555;
    font-size: 1.4rem !important;
}

.ui-widget-header {
    border: 1px solid #fff !important;
    background: #fff !important;
    color: #555 !important;
    font-weight: bold;
}

.ui-datepicker .ui-datepicker-title {
    font-size: 1.4rem !important;
}

.ui-datepicker-month,
.ui-datepicker-year {border: none !important;}
.ui-datepicker .ui-datepicker-title select {
    margin-left: 1rem !important;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 19% !important;
}

/*-----矢印 カスタマイズ-------*/
.ui-datepicker-prev span.ui-icon,
.ui-datepicker-next span.ui-icon {
  text-indent: -9999px !important;
  overflow: hidden !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
.ui-datepicker-prev span.ui-icon {
  background-image: url('../img/common/icon_link_circle1.svg') !important;
}
.ui-datepicker-next span.ui-icon {
  background-image: url('../img/common/icon_link_circle.svg') !important;
}
.ui-datepicker-prev,
.ui-datepicker-next {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
}

基本は自由にカスタマイズは可能ですが、CSSが適用されない場合は「!important」を付けてみてください。