日付の入力フィールドに設定したvalue の値が入力フィールドに反映されない現象と対処法を紹介します。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<input type="date" value="2022-8-3"/>
<input type="submit" value="Enter"/>
</form>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。
inputタグにvalue属性が設定されていますが、日付の入力フィールドにデフォルトの値が表示されません。
yyyy-m-d形式になっているため、正しく認識されないためです。yyyy-mm-dd形式に変更します。inputタグを下記の記述に変更します。
<input type="date" value="2022-08-03"/>
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function buttonClick() {
var elem = document.getElementById("dateInput");
elem.value = "2022-8-4";
}
</script>
</head>
<body>
<form method="post">
<input id="dateInput" type="date" value="2020-06-15" />
<button type="button" onclick="buttonClick();">SetDate</button>
<input type="submit" value="Enter" />
</form>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[SetDate]ボタンをクリックします。クリック後下図の表示に変わります。valueプロパティに値を代入する処理を記述していますが、
yyyy/mm/dd の表示になってしまいます。
yyyy-m-d形式になっているため、正しく設定できないためです。yyyy-mm-dd の形式にします。JavaScript部分を以下のコードに変更します。 <script type="text/javascript">
function buttonClick() {
var elem = document.getElementById("dateInput");
elem.value = "2022-08-04";
}
</script>
