16
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScript 環境ならどこでも使えそうな短いコードの日付書式出力関数。コピペ用。

Last updated at Posted at 2021-04-26

日付ライブラリなら、大体定番なのは Moment.js なので入れてる方も多いかもしれません。

あるいは、Momentがもう更新されないことを知っている方なら、Day.js とかでしたっけ。いろいろ処理するのは便利ですよね。標準的なものがコロコロ変わるのはJavaScriptの楽しめるところですが、開発はなかなか大変です。

そういう日付系ライブラリ入れていれば書式指定の日付出力は簡単なので、こういうコードもいらないのですが、

単に書式出力する程度のことなら、ライブラリ入れずにコードコピペで済ましたい場合も多々あるかと思います。(というか多々あった)

そういうときのためにコードコピペ用に書きました。

const dateToString = (format, date) => {
  const padFirstZero = (value) => {
    return ('0' + value).slice(-2);
  }

  const YYYY = date.getFullYear();
  const YY = date.getFullYear().toString().slice(-2);
  const M = (date.getMonth() + 1).toString();
  const MM = padFirstZero(M);
  const D = date.getDate().toString();
  const DD = padFirstZero(D);
  const H = date.getHours().toString();
  const HH = padFirstZero(H);
  const m = date.getMinutes().toString();
  const mm = padFirstZero(m);
  const S = date.getSeconds().toString();
  const SS = padFirstZero(S);
  const DDD = ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][date.getDay()]

  switch (format) {
    case 'YYYY-MM-DD':
      return `${YYYY}-${MM}-${DD}`;
    case 'D-M-YY':
      return `${D}-${M}-${YY}`
    case 'YYYY/MM/DD HH:mm:SS(DDD)':
      return `${YYYY}/${MM}/${DD} ${HH}:${mm}:${SS}(${DDD})`
    default:
      throw new Error(`dateToString args:format(=${format}) is not supported.`);
  }
};

console.log(dateToString('YYYY-MM-DD', new Date()));
console.log(dateToString('D-M-YY', new Date()));
console.log(dateToString('YYYY/MM/DD HH:mm:SS(DDD)', new Date()));

コード読みやすいと思いますので、拡張するときもどうぞ。曜日出力日本語とか。

もっと複雑多機能なやつ

一度書いたものは二度と書くときに迷いたくないし、将来どこかで再利用しやすいようになるべく汎用的にを考えて実装した、自作ライブラリのParts.js の datetimeToString にはより多機能な日付書式出力関数は用意しているのですがコード量が半端なく大きいのでコピペ不向きでした。

partsjs/date.test.js at v10.5.0 · standard-software/partsjs
https://github.com/standard-software/partsjs/blob/v10.5.0/source/date/date.test.js#L315

以前、記事にもしているのでご参考にでもどうぞです。

JavaScript 書式を指定して日時出力 和暦対応 引用囲み対応 - Qiita
https://qiita.com/standard-software/items/f56a05d35f96022a08a9

追記:コピペ版の任意フォーマット対応版

コメント欄で、任意フォーマット対応版を幾人の方々に作っていただき、とても参考になりましたので、コメント欄もおすすめです。

私の方でもコピペ用とはいえないくらいのコード量ですが、任意フォーマット対応版のコードをコメント欄に書きましたのでこちらにも載せておきます。
ミリ秒部分とか、作ってないので自身で追加してみるといいかもです。

const subIndex = (
  str, indexStart, indexEnd = indexStart,
) => {
  return str.substring(indexStart, indexEnd + 1);
};

const indexOfAnyFirst = (
  str, searchArray, indexStart = 0,
) => {
  let result = Infinity;
  let searchIndex = -1;
  searchArray.forEach((search, index) => {
    const findIndex = str.indexOf(search, indexStart);
    if (findIndex !== -1) {
      if (findIndex < result) {
        result = findIndex;
        searchIndex = index;
      }
    }
  });

  if (result === Infinity) {
    return {
      index: -1,
      searchIndex: -1,
    };
  }
  return {
    index: result,
    searchIndex,
  };
};

const replaceAllArray = (str, replaceArray) => {
  const searchArray = replaceArray.map(element => element[0]);
  let start = 0;
  let result = '';
  while (true) {
    const searchResult = indexOfAnyFirst(str, searchArray, start);
    if (searchResult.index === -1) {
      result += str.substring(start);
      break;
    }

    if (start < searchResult.index) {
      result += str.substring(start, searchResult.index);
      start = searchResult.index;
    }
    result += replaceArray[searchResult.searchIndex][1];
    start += searchArray[searchResult.searchIndex].length;
  }
  return result;
};

const dateToString = (format, date) => {
  const padFirstZero = (value) => {
    return ('0' + value).slice(-2);
  }
  const year4     = date.getFullYear();
  const year2     = date.getFullYear().toString().slice(-2);
  const month1    = (date.getMonth() + 1).toString();
  const month2    = padFirstZero(month1);
  const date1     = date.getDate().toString();
  const date2     = padFirstZero(date1);
  const hours1    = date.getHours().toString();
  const hours2    = padFirstZero(hours1);
  const minutes1  = date.getMinutes().toString();
  const minutes2  = padFirstZero(minutes1);
  const seconds1  = date.getSeconds().toString();
  const seconds2  = padFirstZero(seconds1);
  const day3      = ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][date.getDay()]

  const replaceTable = [
    ['YYYY'   , year4],
    ['YY'     , year2],
    ['M'      , month1],
    ['MM'     , month2],
    ['D'      , date1],
    ['DD'     , date2],
    ['H'      , hours1],
    ['HH'     , hours2],
    ['m'      , minutes1],
    ['mm'     , minutes2],
    ['S'      , seconds1],
    ['SS'     , seconds2],
    ['DDD'    , day3],
  ]
  replaceTable.sort((a, b) => b[0].length - a[0].length);
  let result = format;
  return replaceAllArray(result, replaceTable);
};
// const day1 = new Date('2021-04-26')
// console.log(dateToString('YYYY-MM-DD', day1));
// console.log(dateToString('D-M-YY', day1));
// console.log(dateToString('YYYY/MM/DD HH:mm:SS(DDD)', day1));
// console.log(dateToString('YYYYMMDDHHmmSSDDD', day1));
// console.log(dateToString('DDDSSmmHHDDMMYYYY', day1));

// 2021-04-26
// 26-4-21
// 2021/04/26 09:00:00(Mon)
// 20210426090000Mon
// Mon00000926042021
16
22
15

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?