Language
PHP
Compiler
php 7.1.6
Options
$ php prog.php <!DOCTYPE html>
<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>お問い合わせ</title>
<link rel="stylesheet" href="reset.css">
<style>
/* 入力フォームの位置 */
.auto-style1 {
text-align: center;
}
/* セレクトボックスの位置 */
.auto-style2 {
text-align: center;
/* セレクトボックス中央に配置 */
}
/* 日付選択のボックスのデザイン1 */
#time4 {
vertical-align: middle;
box-sizing: border-box;
border: 3px solid #63e02d; /* 枠線 */
padding: 0.5em; /* 内側の余白量 */
background-color: snow; /* 背景色 */
width: 9.9em; /* 横幅 */
height: 41px; /* 高さ */
font-size: 1.2em; /* テキスト内の表示文字サイズ */
color: #000000;/* 色 */
line-height: 1.2; /* 行の高さ */
}
/* 時間指定のセレクトボックスのデザイン1 */
#timehh1{
vertical-align: middle;
box-sizing: border-box;
border: 3px solid #63e02d; /* 枠線 */
background-color: snow; /* 背景色 */
width: 9.9em; /* 横幅 */
height: 41px; /* 高さ */
font-size: 1.0em; /* テキスト内の表示文字サイズ */
color: #000000;
line-height: 1.2; /* 行の高さ */
}
/* カレンダーの装飾設定 */
/* 日曜日のカラー設定 */
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;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
// カレンダーを日本語化します。以下。
$(function() {
$("#time4").datepicker( {
changeYear: true, // 年選択をプルダウン化
changeMonth: true // 月選択をプルダウン化
} );
// 日本語化
$.datepicker.regional['ja'] = {
closeText: '閉じる',
prevText: '<前',
nextText: '次>',
currentText: '今日',
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: '週',
dateFormat: 'yy/mm/dd（DD）',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
$.datepicker.setDefaults($.datepicker.regional['ja']);
});
// カレンダーを日本語化します。ここまで。
</script>
</head>
<body>
<form action="form1.php" method="post" id="form">
<div class="auto-style2">
<span class="auto-style3"><strong>第1希望：※</strong></span>
<input type="text" id="time4" class="example" placeholder="年＿月＿日＿" name="time4"
value=""/>
<span class="selectbox">
<select id="timehh1" class="input_time1" name="timehh1">
<option value="">時間指定1</option>
</select>
</span>
</div>
</form>
</body>
</html>
Exit Code:
0