Language
PHP
Compiler
php 7.1.6
Options
$ php prog.php <!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>お問い合わせ</title>
<style>
/* 日付選択のボックスのデザイン1 */
#input_date1 {
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; /* 行の高さ */
}
input.example {
position: relative;
width: 170px;
height: 20px;
color: white;
}
input.example:before {
position: absolute;
left: 1px;
color: black;
content: attr(data-date);
}
input.example::-webkit-datetime-edit-year-field,
input.example::-webkit-datetime-edit-month-field,
input.example::-webkit-datetime-edit-day-field {
display:none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script>
$(function()
{
moment.locale('ja', {
weekdays: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
weekdaysShort: ['日', '月', '火', '水', '木', '金', '土']
});
$('input').on('change', function() {
if (moment(this.value).isValid())
{
this.setAttribute(
'data-date',
moment(this.value).format(this.getAttribute('data-date-format'))
);
}
else
{
this.setAttribute('data-date', '');
}
}).trigger('change');
});
function getValue()
{
alert($(".example").val()); // 2021-12-10
}
</script>
</head>
<body>
<form action="form1.php" method="post">
<div class="auto-style2">
<span class="auto-style3"><strong>第1希望：※</strong></span>
<input type="date" id="input_date1" class="example" data-date-format="YYYY/MM/DD (dddd)" name="time4"
value="" />
</div>
<td colspan="2"><input type="submit" name="submit" value="確認画面へ"></td>
</form>
</body>
</html>Exit Code:
0