日付の入力フィールドに設定したvalue の値が入力フィールドに反映されない - HTML
日付の入力フィールドに設定したvalue の値が入力フィールドに反映されない現象と対処法を紹介します。
事例1
現象の確認
以下の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属性が設定されていますが、日付の入力フィールドにデフォルトの値が表示されません。
原因
value属性の日付形式が、
yyyy-m-d形式になっているため、正しく認識されないためです。
対処法
value属性の値を
yyyy-mm-dd形式に変更します。
inputタグを下記の記述に変更します。
<input type="date" value="2022-08-03"/>
事例2
現象の確認
以下の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 の表示になってしまいます。
原因
JavaScriptでvalueプロパティに設定する際の日付形式が、
yyyy-m-d形式になっているため、正しく設定できないためです。
対処法
valueプロパティに代入する日付形式を
yyyy-mm-dd の形式にします。JavaScript部分を以下のコードに変更します。
<script type="text/javascript">
function buttonClick() {
var elem = document.getElementById("dateInput");
elem.value = "2022-08-04";
}
</script>
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
