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

Web技術

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

今回は、”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”のデザイン設定についての投稿でした。