経緯

指定した時間から経過した時間「X年Xヶ月」を日本語で返す関数、ググれば使えるものがすぐ出てくるかと思ったが記事がなかったので書いておく

前提

開発では日付管理ライブラリによくdate-fnsを使用するので今回はそちらを利用する

いまから導入する場合は早速追加

terminal

$ npm install date-fns --save
# or
$ yarn add date-fns

実装

コメント欄で教えて頂いた内容を以下に追記（2020/07/31）

formatDurationを使用する方法

formatDurationにlocale: jaを渡して実装する方法だと比較的シンプルに求められる
（この場合表示形式は「2年 2か月」の様な定型文で返ってくる）

import { formatDuration, intervalToDuration, parseISO } from 'date-fns';
import { ja } from 'date-fns/locale';

export function formatInterval(start: Date, end: Date) {
  const duration = intervalToDuration({ start, end });
  return formatDuration(duration, {
    format: ['years', 'months'],
    locale: ja,
  });
}

formatInterval(
  parseISO('2018-04-10T00:00:00'),
  parseISO('2020-06-10T00:00:00')
); // '2年 2か月'

differenceInYears, differenceInMonthsを使用する方法

「2年 2か月」などの定型文ではなく「2年2ヶ月」など自由な形式で表示したい場合はこちら


import { differenceInYears, differenceInMonths, parseISO } from 'date-fns';

~ ~ ~

// 指定した時間から経過した時間「X年Xヶ月」を返す
const getDifferenceInYM = (targetDate: Date, baseDate: Date) => {
  let date = targetDate;
  const diffYears = differenceInYears(baseDate, date);
  if (diffYears) {
    date = addYears(date, diffYears);
  }
  const diffMonths = differenceInMonths(baseDate, date);

  const year = diffYears ? `${diffYears}年` : '';
  const month = diffMonths ? `${diffMonths}ヶ月` : '';
  return `${year}${month}`;
};

getDifferenceInYM(
  // stringをDate型に変換
  parseISO('2018-04-10 00:00:00'),
  parseISO('2020-06-10 00:00:00')
); // '2年2ヶ月'