html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/customize.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "img/cal.jpeg",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy年m月d日',
minDate: new Date(2019, 2 - 1, 15),
maxDate: new Date(2020, 7 - 1, 15),
showButtonPanel: false, // ボタンパネルを表示
gotoCurrent: false, // ボタンパネルに当日日付のボタン表示
prevText: '<前',
nextText: '次>',
monthNames: [ "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月" ],
monthNamesShort: [ "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月" ],
dayNames: [ "日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日" ],
dayNamesShort: [ "日","月","火","水","木","金","土" ],
dayNamesMin: [ "日","月","火","水","木","金","土" ],
weekHeader: "週",
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: "年"
});
} );
</script>
</head>
<body>
Date: <input type="text" id="datepicker" value="2020年6月10日">
</body>
</html>
customize.css
/* 日曜日のカラー設定 */
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-title{
display: flex;
justify-content: center;
-webkit-justify-content: center;
}
.ui-datepicker select.ui-datepicker-year{
margin-right: 0.1rem;
width: auto;
}
.ui-datepicker select.ui-datepicker-month{
margin-left: 0.3rem;
width: auto;
}
.ui-datepicker{
font-size: 80%;
}