日時の整形を行う関数のコードを掲載します。ドキュメントは「dateFormatドキュメント」をご覧下さい。
「ログを出力する際」や「名前が重ならないようにファイルを作成する際」に、日付の文字列をファイル名に添えることはよくあります。しかし、JavaScriptは、標準でDateフォーマットを行う関数が用意されていません。
そこで、何らかのDateフォーマットを行うライブラリを使うことになるのですが、最近のライブラリは、Node.jsでも使えるようにしっかりと作っているために、やたらファイル数が多くて、ファイルサイズが大きかったりします。やりたいことは、そんなにたいそうなことではないのに。
欲しいのは、単機能で1ファイルの関数です。ということで、本ページのような関数を作っておき、必要に応じて利用しています。
ファイル構成は以下の通りです。>>ダウンロード
- sample/dateFormat.js (※)
- sample/index.html
- sample/main.css
- sample/main.js
- sample/node_sample.js（Node.jsのサンプル）
※ 初期化用関数「init」の処理については「Webブラウザ/Node.js 互換関数」をご覧下さい。
サンプル動作
sample/dateFormat.js
'use strict';
(function() {
const _t = init('com.crocro.util');
// dateFormat | 日付時間フォーマット
_t.dateFormat = function(txt, d) {
if (d === undefined) {d = new Date()}
const dgt = (m, n) => ('0000' + m).substr(-n);
const arr = [
{k: 'YYYY', v: d.getFullYear()}
,{k: 'YY', v: dgt(d.getFullYear(), 2)}
,{k: 'MM', v: dgt(d.getMonth() + 1, 2)}
,{k: 'M', v: d.getMonth() + 1}
,{k: 'DD', v: dgt(d.getDate(), 2)}
,{k: 'D', v: d.getDate()}
,{k: 'hh', v: dgt(d.getHours(), 2)}
,{k: 'h', v: d.getHours()}
,{k: 'mm', v: dgt(d.getMinutes(), 2)}
,{k: 'm', v: d.getMinutes()}
,{k: 'ss', v: dgt(d.getSeconds(), 2)}
,{k: 's', v: d.getSeconds()}
,{k: 'iii', v: dgt(d.getMilliseconds(), 3)}
,{k: 'i', v: d.getMilliseconds()}
];
arr.forEach(x => {txt = txt.replace(x.k, x.v)});
return txt;
};
// 初期化用関数
function init(p) {
try {return module.exports = {}} catch(e) {}
return ((o, p) => {
p.split('.').forEach(k => o = o[k]||(o[k]={}));
return o})(window, p);
};
})();解説
第1引数には、「'YYYY-MM-DD hh:mm:ss'」のような、整形用の文字列を指定します。詳細は、「dateFormatドキュメント」をご覧下さい。
第2引数には、Dateオブジェクトを指定します。第2引数が指定されていない場合（undefined の場合）は、「d = new Date()」として、Dateオブジェクトを作成して、変数「d」に格納します。
頭に「0」を入れた桁揃えは、関数内の「dgt」関数で行います。
文字列の「substr」にマイナスの値を入れると、末尾から指定した数字の文字数を先頭にできます。「substr」の第2引数を指定しないことで、その位置から末尾までの文字列を取得しています。
配列変数「arr」には、置換用の文字列と、日付の数字や桁揃えした文字列を格納しています。年月日などは、それぞれ「Date」のメソッドで取得しています。
気を付ける点は、「d.getMonth() + 1」です。月は0から始まる数値なので、1加算することでカレンダーの数値にしています。
「arr.forEach」を使って、作成した配列変数「arr」の各要素を利用して処理を行っていきます。「txt = txt.replace(x.k, x.v)」とすることで、文字列「'YYYY'」を「d.getFullYear()」の値というように、置換していきます。
ポイントは、長い文字列「'YYYY'」の方が、短い文字列「'YY'」よりも先に置換しているところです。逆にすると、「'YYYY'」の最初の2文字の所が数字に置換されてしまい「'18YY'」のようになってしまいます。
dateFormat｜日付時間フォーマット
Dateオブジェクトを、指定されたフォーマットで文字列にして戻します。@param {String} txt - フォーマット文字列。
「YYYY-MM-DD hh:mm:ss」のように指定します。
「桁揃え」の場合は、先頭に「0」を埋めて桁を揃えます。
年の「YY」は下2桁の値になります。
・「YYYY」年4桁、「YY」年2桁
・「MM」月2桁、「M」月数字
・「DD」日2桁、「D」日数字
・「hh」時2桁、「h」時数字
・「mm」分2桁、「m」分数字
・「ss」秒2桁、「s」秒数字
・「iii」ミリ秒3桁、「i」ミリ秒数字
@param {Date} d - Dateオブジェクト。
未指定（undefined）の場合は、新しくDateを作り、現在の日時を利用します。
指定した場合は、そのDateオブジェクトの日時で、処理を行います。
@return フォーマットされた日時文字列を戻します。
サンプル
// Webブラウザ
const dateFormat = com.crocro.util.dateFormat;
console.log(dateFormat('YYYY-MM-DD hh:mm:ss'));
// '2018-06-27 12:34:56'
// Node.js
const dateFormat = require('./dateFormat.js').dateFormat;
console.log(dateFormat('YYYY-MM-DD hh:mm:ss'));
// '2018-06-27 12:34:56'sample/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>日付時間フォーマット - JavaScript実用サンプルコード解説付き</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="dateFormat.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<textarea id="src"></textarea>
<button id="exec">実行</button>
<textarea id="dst"></textarea>
</body>
</html>sample/main.js
'use strict';
$(function() {
// 変数の初期化
const $src = $('#src');
const $dst = $('#dst');
const $exec = $('#exec');
// 値のセット
$src.val(String.raw`
const dateFormat = com.crocro.util.dateFormat;
console.log(dateFormat('YYYY-MM-DD hh:mm:ss'));
console.log(dateFormat('YYMMDD hhmmss'));
console.log(dateFormat('YYYY年M月D日 h時m分s秒'));
`.trim());
// コンソール ログのラップ
const log = console.log;
console.log = function() {
for (let i = 0; i < arguments.length; i ++) {
$dst.append(arguments[i] + ' ');
}
$dst.append('\n');
log.apply(console, arguments);
};
// クリック時の処理
$exec.click(() => {
$dst.empty();
eval($src.val());
});
});sample/main.css
html,
body {
margin: 0;
padding: 0;
}
textarea,
button {
box-sizing: border-box;
width: 100%;
vertical-align:bottom;
}
textarea {
height: 5em;
}sample/node_sample.js
// モジュールの読み込み
const dateFormat = require('./dateFormat.js').dateFormat;
// 実行
console.log(dateFormat('YYYY-MM-DD hh:mm:ss'));
console.log(dateFormat('YYMMDD hhmmss'));
console.log(dateFormat('YYYY年M月D日 h時m分s秒'));紹介
