3週間前に投稿

誕生日から「○歳 ○ヶ月 ○日」と表示してみた

この記事は約 8 分で読めます。

4.5

タイトルの通りで、
ある年月日から
「○年 ○ヶ月 ○日」
と表示できないかな?
と思い調べました。

Dateオブジェクトで
出来るだろうなとは思いましたが、
ズバリとヒットした記事は
(調べ方が悪いのか)
意外にも2件しかありませんでした。

結果

計算の仕方に関しては
ちんぷんかんぷんなのですが、
平均日数(1年365日を12で割った値)で、
ひと月を計算する方法のようです。

As an example

const bthday = new Date("2019/08/28");
const dateNow = new Date();
const timeStamp = dateNow.getTime() - bthday.getTime();
const daysTillnow = timeStamp / (1000 * 3600 * 24);
const daysMonth = 365 / 12;
const theBday = (new Intl.DateTimeFormat('ja-JP', {
  dateStyle: "full"
}).format(bthday));
const passdayY = Math.floor(daysTillnow / 365);
const passdayM = Math.floor((daysTillnow - 365 * passdayY) / daysMonth);
const passdayD = Math.floor((daysTillnow - 365 * passdayY - daysMonth * passdayM));
document.getElementById("thebday").innerHTML = theBday;
document.getElementById("passdy").innerHTML = passdayY;
document.getElementById("passdm").innerHTML = passdayM;
document.getElementById("passdd").innerHTML = passdayD;
Birthday:
What is your age ? ヶ月

以下は色々試した結果の
備忘録となります。

String

document.getElementById("passdy").innerHTML = String(passdayY);
document.getElementById("passdm").innerHTML = String(passdayM);
document.getElementById("passdd").innerHTML = String(passdayD);

ToString

document.getElementById("passdy").innerHTML = passdayY.toString();
document.getElementById("passdm").innerHTML = passdayM.toString();
document.getElementById("passdd").innerHTML = passdayD.toString();

ゼロパディング (String + padStart)

const bthday = new Date("2019/08/28");
const dateNow = new Date();
const timeStamp = dateNow.getTime() - bthday.getTime();
const daysTillnow = timeStamp / (1000 * 3600 * 24);
const daysMonth = 365 / 12;
const theBday = (new Intl.DateTimeFormat('ja-JP', {
  dateStyle: "full"
}).format(bthday));
const passdayY = Math.floor(daysTillnow / 365);
const passdayM = Math.floor((daysTillnow - 365 * passdayY) / daysMonth);
const passdayD = Math.floor((daysTillnow - 365 * passdayY - daysMonth * passdayM));
document.getElementById("thebday").innerHTML = theBday;
document.getElementById("passdy").innerHTML = String(passdayY).padStart(2, "0");
document.getElementById("passdm").innerHTML = String(passdayM).padStart(2, "0");
document.getElementById("passdd").innerHTML = String(passdayD).padStart(2, "0");
Birthday:
What is your age ? ヶ月

ToString + padStart

document.getElementById("passdy").innerHTML = passdayY.toString().padStart(2,"0");
document.getElementById("passdm").innerHTML = passdayM.toString().padStart(2,"0");
document.getElementById("passdd").innerHTML = passdayD.toString().padStart(2,"0");

String + slice

document.getElementById("passdy").innerHTML = ('0' + String(passdayY)).slice(-2);
document.getElementById("passdm").innerHTML = ('0' + String(passdayM)).slice(-2);
document.getElementById("passdd").innerHTML = ('0' + String(passdayD)).slice(-2);

ToString + slice

document.getElementById("passdy").innerHTML = ('0' + passdayY.toString()).slice(-2);
document.getElementById("passdm").innerHTML = ('0' + passdayM.toString()).slice(-2);
document.getElementById("passdd").innerHTML = ('0' + passdayD.toString()).slice(-2);

As an example 2

こちらはさらに
ちんぷんかんぷんなのですが
-= 」これって何?

減算代入 (-=)

減算代入演算子 ( -= ) と
言うものらしく、
演算子の左側の値から右側の値を引き算して、
その結果を左側に代入する演算子だそうです。
引き算と代入をまとめてやる演算子らしいです。

例えば「a-=b」は、
aからbを引いて、aに代入する事のようです。
減算「a = a - b

=」は、
左右が同じ値という意味ではなく
右の値を左の変数に代入する
という意味になるそうです。

const daysFuture = new Date("2019/08/28");
const daysMonth = 365 / 12;
const daysYear = 365;
const timeStamp = Date.now() - daysFuture.getTime();
const bthDay = (new Intl.DateTimeFormat('ja-JP', {
  dateStyle: "full"
}).format(daysFuture));
let passDay = Math.floor(timeStamp / 86400000);
const passYear = Math.floor(passDay / daysYear);
passDay -= passYear * 365;
const passMonth = Math.floor(passDay / daysMonth);
passDay -= Math.floor(passMonth * daysMonth);
document.getElementById("bh_day").innerHTML = bthDay;
document.getElementById("p_year").innerHTML = String(passYear).padStart(2, "0");
document.getElementById("p_month").innerHTML = String(passMonth).padStart(2, "0");
document.getElementById("p_day").innerHTML = String(passDay).padStart(2, "0");

最低限の演算子

「演算子」と言っても
種類も多様なようですし、
呪いくらいにしか思って
いませんでしたが、
最低限覚えておく必要が
あるものをまとめました。

記号説明記号説明記号説明
+足す-引く*掛ける
/割る%余り=入れる
>大きい<小さい>=以上
<=以下==等しい!=等しくない
++1足す--1引く+=元の数に足す
-=元の数から引く&&両方 OK||どちらか OK

% 」剰余演算子の「余り」って
どういう事?と思いましたが、
16%7 」と書くと答えは、
16を7で割った余りの「 2 」ですって!

参考文献

最後に

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

誕生日から「○歳 ○ヶ月 ○日」と表示してみた