datepickerの使用方法について解説!!(デザイン編)

Web技術

サイト管理人の’kai’です。( `・∀・´)ノヨロシク

今回は、”datepicker”のデザイン設定について投稿していきます。

この記事を見れば、datepickerを用いたカレンダーを綺麗に見せることが出来ます。

デザイン設定

上記の画像のようなイメージとなるデザイン設定について投稿しています。

以下の設定をしてもらえれば、画像と同じデザインとなります。

/* 日曜日のカラー設定 */
td.ui-datepicker-week-end:first-child a.ui-state-default{
  background-color: #ffecec;
  color: #f00!important;
}
/* 土曜日のカラー設定 */
td.ui-datepicker-week-end:last-child a.ui-state-default{
  background-color: #eaeaff;
  color: #00f!important;
}
/* ホバー時の動作 */
td.ui-datepicker-week-end a.ui-state-hover{
  opacity: 0.8;
}
/* 当日を示す色はそのまま */
td.ui-datepicker-week-end a.ui-state-highlight{
  background-color: #fffa90!important;
}
/* 年表示 */
.ui-datepicker-year {
  height: 25px
}
/* 月表示 */
.ui-datepicker-month {
  height: 25px
}
/* イメージ表示 */
.ui-datepicker-trigger {
  height: 20px;
  width: 20px;
  margin-left: 2.5px;
  vertical-align: bottom;
}

まとめ

“datepicker”のデザイン設定についてまとめました。

Webシステムで時々使用されるdatepickerのカレンダーですが、そのまま使用するとシンプルなデザインのままです。

当記事を用いると、ユーザーにも見易い表示となっていきます。

システム開発の参考になればと思います。