初めに
input 要素に今日の日付を既定値を設定する等の要件で JavaScript から設定できたら
何かと便利かなと思い、調査した結果の備忘録です。
検証ブラウザ
- 動作OK
- Chrome 88.0.4324.190（Official Build） （64 ビット）
- Microsoft Edge バージョン 88.0.705.81 (公式ビルド) (64 ビット)
- 動作NG
- IE11
IE11 の場合、input type="date" がそもそも、テキスト表示になるため残念な感じです。
どうしてもIE11 で組む必要があるならば、jQuery UI の datepicker 等を利用して
フォーマットを合わせたら同じことはできそうです。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="date" id="date"/>
<input type="datetime-local" id="datetime"/>
<script>
window.onload = function() {
document.getElementById('date').value = dateString(new Date(),false);
document.getElementById('datetime').value = dateString(new Date(),true);
}
function dateString(targetDate,isIncludeTime) {
let year = targetDate.getFullYear();
let month = ('0' + (targetDate.getMonth() + 1)).slice(-2);
let date = ('0' + targetDate.getDate()).slice(-2);
let result = year + '-' + month + '-' + date;
if(isIncludeTime) {
let hours = ('0' + targetDate.getHours()).slice(-2);
let minutes = ('0' + targetDate.getMinutes()).slice(-2);
result += 'T' + hours + ':' + minutes;
}
return result;
}
</script>
</body>
</html>
解説
inputタグに対して値をセットする場合、value属性に対して値をセットすればよく
type="date"に指定した場合は、「yyyy-MM-dd」形式
type="datetime-local"に指定した場合は、「yyyy-MM-ddThh:mm」形式で与えれば上手く表示されます。
<input type="date" value="2020-04-20" />
なので、あとは JavaScript でセットしたい文字列を作って、セットするだけです。
toStringみたいな文字列関数で、フォーマットを引数に与え簡単に出力できるのかな？
と思いきや、便利な関数は用意されていないみたいなので（ないよね？）
年月日の取得
年月日の取得は月のみ注意が必要です。0~11を返却するので
3月に対して getMonth関数を呼び出すと2と返却されます。
そのため、日付用の文字列に直す場合、1足した値が必要です。
let today = new Date();
console.log(today); //=> Mon Mar 01 2021 23:46:22 GMT+0900 (日本標準時)
console.log(today.getFullYear()) //=> 2021
console.log(today.getMonth()) //=> 2 (0~11)を返すので注意
console.log(today.getDate()) //=> 1
0埋め
年月日が取得できたので、あとはフォーマットに合わせて文字列にしたらOKなのですが
以下のように0埋めしない日付をvalueに指定しても画面に上手く表示されません。
<input type="date" value="2020-4-20" />
そのため、月、日に関しては 0埋めの2桁表示が必要です。
0埋は次のロジックで実現しています。
- 文字列処理で先頭に0を付与する。単純に足し算で連結しています。
- 文字列の末尾1桁を取得する。slice関数に負の数を指定することで末尾から取得できます。
('0' + 4) //=> '04'
('0' + 4).slice(-2) //=> '04'
('0' + 20) //=> '020'
('0' + 20).slice(-2) //=> '20'
関数 dateString
Dateオブジェクトを文字列に直す関数を作成しました。
引数として、文字列に直したいDateオブジェクト(targetDate)
時刻を含めるかどうかの真偽値(isIncludeTime)としています。
変数のネーミングセンスや英語力には自信がないので
おかしい部分もあるかもしれません。
英語を勉強しようかと思いながらも、基本1人でしかプログラミングしないので
その労力を惜しんでしまう悪い癖ですね。