JavaScriptで年数の加算が上手くいかない

Question

前提・実現したいこと

フォームAに契約日、フォームBに契約期間を入力すると、フォームCに契約終了日(1日前)が出てくるようにしたいです。

例:
フォームA→　2021/2/1
フォームB→　１ (年)
フォームC→　2022/1/31

又同時に、フォームBが3か月や半年だった時、0.3や0.6と入力して結果を出したいのですが反応しません。
できればそちらも実現したいと考えております。

発生している問題・エラーメッセージ

1日前にしたいので、date1.getDate() -1とマイナスしたところ、2月0日という様に月初のみ月をまたぐことができません。

該当のソースコード

<div class="form form07">
  <label for="agreement_start" class="form_name">契約開始日</label>
    <input id="agreement_start" type="date" name="agreement_start" class="form07_date">
</div>

<div class="form form08">
  <label for="agreement_kikan" class="form_name" >契約期間</label>
  <input id="agreement_kikan" type="number" name="agreement_kikan" placeholder="半角数字">
</div>

<div class="form">
  <label for="agreement_end" class="form_name">契約終了日</label>
<input id="agreement_end" type="text" name="agreement_end"/>
</div>

jQuery(function($) {
	jQuery(document).on('blur', '#agreement_start, #agreement_kikan', function(){
		var date1 = document.getElementById("agreement_start").value;
		var days = document.getElementById("agreement_kikan").value;
		var date2 = addDate(date1, days);
		jQuery("#agreement_end").val(date2);
	});
});

/*
 *日付の差分日数を返却します。
 */
function addDate(date1Str, days) {
	var date1 = new Date(date1Str);

	// パラメータで取得した日数を加算
	date1.setFullYear(date1.getFullYear() + Number(days));

	// Date型を（YYYY/MM/DD）形式へ成型して返却
	return [date1.getFullYear() , date1.getMonth() + 1, date1.getDate() - 1].join('/');
}

補足情報（FW/ツールのバージョンなど）

こちらのサイト様のコードを参考に記述しております。
jsはまだ勉強中のため、わからない事の方が多いのですがどうかお知恵を貸していただきたいです。
補足が必要でしたら教えていただけますと幸いです。どうかよろしくお願いいたします。

Answer 1

1年足す処理で date1.setFullYear(... + Number(days)) とやってますから、1日引く処理でも同様に date1.setDate(... - 1) としましょう。

0.3や0.6と入力して結果を出したい

setFullYear() に少数を足した値を渡しても動かないと思いますので、0.6 や 0.3 の場合は setMonth() で月数を足すように分岐しましょう。

Comments

[emma.]

ありがとうございます。
date1.setDate(date1.getDate() - 1 )
で1日引くのは上手くできました。

月数の分岐はif文でできるかと思い、上記処理の後に下記を記述してみたのですが反応しません。
宜しければ今一度アドバイスを頂けますと幸いです。

if (days < 1){
function addDate(date1Str, days){
var date1 = new Date(date1Str);

date1.setMonth(date1.getMonth() + Number(days)* 10);

return [date1.getFullYear() , date1.getMonth() + 1, date1.getDate()].join('/');
}}

[int32_t]

もし「1が1年、0.6が半年、0.3が3ヶ月」という仕様だとdaysから1つの式で月数を計算することはできないので、1かそれ以外かで判定するために条件分岐が必要という意図でした。

if (days == "1")
date1.setFullYear(... + Number(days));
else
date1.setMonth( ... + Number(days) * 10);

という感じです。

「1が1年、0.5が半年、0.25が3ヶ月」や「1.2が1年、0.6が半年、0.3が3ヶ月」という仕様なら条件分岐なしでできます。

[emma.]

ご丁寧に教えていただき本当にありがとうございます。
下記で無事実装することができました。
ただ１点、0.5や0.8にすると日付のマイナス1がなくなってしまうようなのですが、他の数字ではきちんと-1された月末が表示されるため、何かPC上の問題なのか？と思っています。

function addDate(date1Str, days) {
var date1 = new Date(date1Str);

// パラメータで取得した日数を加算
date1.setDate(date1.getDate() - 1 )

if (days == "1")
date1.setFullYear(date1.getFullYear() + Number(days));
else
date1.setMonth(date1.getMonth() + Number(days) * 10);

// Date型を（YYYY/MM/DD）形式へ成型して返却
return [date1.getFullYear() , date1.getMonth() + 1, date1.getDate()].join('/');
}

[int32_t]

> 0.5や0.8にすると日付のマイナス1がなくなってしまう

具体的な入力と結果が不明なのではっきりしたことはわかりませんが、setDate() を setFullYear() setMonth() より後に行うと直るかもしれませんね。

[emma.]

setDate() を後ろにしたら直りました!
何から何まで本当にありがとうございます。
とても勉強になりました。

Answer 2

JavaScriptで直接Dateオブジェクト触るのも良いですが、面倒なのとミスやバグの可能性を増やしてしまうので、日付操作ライブラリを使用するのもひとつの手です。

以前はmoment.jsというのが主流でしたが、開発が今後行われないことが決定したため、代替としてDay.jsなどが用いられます。

https://day.js.org/

Comments

[emma.]

まだまだ初心者なので、日付操作ライブラリというものも初めて知りました。
今後の為に勉強していきたいと思います。
教えていただき誠にありがとございます。

[Eskee]

直接日付を捜査すること自体は間違いではありません。
ライブラリの利用も、リクエスト数やアセット容量の増加というデメリットもあるので、ケースバイケースで使い分けれるといいですね。