日付の入力補助としてのカレンダーの作成（Java）

投稿日：2021年3月9日

更新日：2021年3月8日

突然の依頼に、.netは止めて、とりあえずJAVA（JS）

前回までは、.netでしたが、突然に、JAVA開発の依頼が・・・。

勿論、無視は出来ないので、Java+TomCatの作業になりました。

前回の内容は、こちらから参照願います。
実用的なカスタムコントロールの作り方（初級）（TextBox編）

まずは、要件を整理。

基本的には、日付入力の補助である。
日付のデフォルトは、本日日付の月でカレンダーを表示。
1. ということは、パラメータも必要と思われる。
  1. パラメータ
    1. 初期表示年月
本日日付は、何がいいかと聞くと！
1. 聞いた日付は、下記でした。
  1. クライアント日付
  2. Javaサーバ日付
  3. Sqlサーバ日付
2. 結論は、JAVAサーバの日付。
その他の要件を聞いてみると！
1. お任せでお願いしますとの事！
  1. これって、一番むずかしいのよね～(笑)

とりあぜず、要件は把握したので、さて、どこから持ってくるか！

あっ！

このサイトのカレンダープラグイン（私が作成しました(笑)）から持ってくるかな！(笑)

よく考えたら、解ること！

よく考えなくても、解るのですが、これって、PHPでの開発でした(笑)

HTMLや日付のループ処理の方法は解るので、一から作りますかね！

それより、面倒なのが、日付をサーブレット経由で取ってくるということですね～www^^;

ブラウザ（Ajax等）の推奨なのが、非同期なのですwww^^;

皆さんは、非同期道のようにやっているのでしょうね～！

個人的に非同期は、その部分のロジックについて、1.5倍は、工数かかるのではないかと思います。

表示だけなら、非同期の意味も負荷を考えて解らないでもないのですが、入力系になると！下記のようなことがあるので、結局、サーバーからデータが返ってくるまで、待たなければいけないことになってしまうのです。

初回のいくつかのコンボーデータを取りに行く。
1. まだ、データは返っていない状態
非同期なので、JS側は、そのまま処理が流れてしまう。
そこで、コンボに初期値などを送ってしますと・・・www^^;

なので、全てのサーバ要求処理が終わるまで、待機処理を行っています。(笑)
（これって、非同期処理をしていますが、同期みたいなものですね(笑)）

ぶつぶつ言っても始まらないので、とりあえず、サーバー日付を取ってくるクラスを作成しました♪
これで、どこからでも、このメソッドを呼ぶことで、取得が出来ると思います。

さて、カレンダー作成に入ります。

カレンダーの作成

問題は、どちらでカレンダーのHTMLを作成すべきか！

本来は、JAVAでHTML作成して、それを返却し、表示すべきと思えますが、翌月や当月の表示を行うたびに問合せをしなければなりません^^;

それもバカらしいので、JS（JavaScript）で作成する方法と決定しました♪

それはいいのですが、よく考えたら、JSでカレンダー作ったことがない！？

.netは、そのまま、カレンダーコントロール
PHPは、自作のプラグイン。

やはり、ないかも！　まっ！いいか！

まずは、ベース年月（New Date()）を元に！

やはり問題が発生！

えっ！Jsの日付オブジェクトほとんど使ったことないかもwww^^;

とりあえず、Google先生に聞きながら！フムフムフム！
でも、なんか、めんどくさいかもwww^^;

Google先生に聞いていると！

えっ！面白いのがあるではないか！！

jQueryのDatepicker！！

見れば見るほど、これでいいのでは？って、思ってしまうwww^^;

どうしよう・・・？

悩みながら、導き出した答えは、Datepickerを使わないことでした(笑)

jQueryの中での開発になってしまうので、制限があるかも知れない。
又、今後予想拡張性を考えた場合、その制限にかかるかも知れない。
1. 予想される拡張機能
  1. 年月の指定
  2. 祝日の対応
  3. 稼働日の対応
  4. その他、日付以外の情報を元に、色分けなど
自作していたものは、自由に拡張出来る。

ということで、Datepickerは、今回は見送りとなりました。

さて、JSの日付系の命令をまとめると！

日付オブジェクトを使用
本日日付は、New Date();
月換算は、dt.setMonth(dt.getMonth() + 2);（２ヵ月プラス）
日換算は、dt.setDate(dt.getDate() + 10);（10日プラス）
曜日は、dt.gatDay():
内部数値は、dt.Time();

まっ！これだけわかれば出来るかかな！
後は、クラスメドッドにした方がいいのは、メッソドにして！

とりあえず、ロジック完成！

テストですね♪

テストで、そんなにすぐには動きませんよ(笑)

まぁ、作成したばかりで、直ぐに動くことはありませんね！やはり、いきなり落ちます(笑)

いきなり落ちる原因は、内部数値が返ってくる？

ブラウザで、new Date()の値を確認すると！変数には、下記が入っています。
- let dat = new Date();
  - Mon Mar 08 2021 16:49:53 GMT+0900 (東京 (標準時))
  - これが、日付Objectなんですね♪
日付を月初にしたいので、dat.setDate(1)を行うと、結果は！
- let datS = dat.setDate(1);
  - 1614584904000
  - これって、内部数値ですね！
月末を求めたいので、datS.setMonth(datS.getMonth + 1)を行うと
- let datE = datS.setMonth(datS.getMonth + 1);
- おちました～www^^;
- ちなみに、これでも落ちます(笑)
  - dat.setDate(1).getMonth();
    - Object doesn’t support property or method ‘getMonth’だそうです！

というのが原因です。

どうも、setの戻り値、日付の内部値になっていて、日付Objectではないようです。

回避策は！こんな感じで、さらにNew Dateをつけて、日付Objectに変換が必要ということになるます。

new Date(dat.setDate(1)).getMonth();

あれ？月初のロジックが動いたタイミングで、datの変数が変わってしまう。

これった、実は、ハマりました(笑)

ブラウザで、new Date()の値を確認すると！変数には、下記が入っています。
- let dat = new Date();
  - Mon Mar 08 2021 16:49:53 GMT+0900 (東京 (標準時))
日付を月初にしたいので、dat.setDate(1)を行うと、結果は！
- let datS = new Date(dat.setDate(1));
  - 先程件で、勉強しました(笑)
- あれ？datの内容が、datSと同じになっているwww^^;
- 考え中～www^^;
  - ブラウザ（MS）が悪い？
    - Chromeでも同じwww
    - 当たり前か！

で、よく考えたら！日付Objectの型ということに気が付きました！！

そうです、日付Objectは、Objectと書いていました(笑)。

オブジェクト型は、参照変数なので、dat変数とdatS変数は、同じ変数ということになりますwww^^;
このことを、完全に忘れていましたwww^^;

ということで、回避策はこちらになります。

let datS = new Date(new Date(dat).setDate(1));

なんか、New Dateの嵐～www^^;
正直言って、使いにくいです～(笑)(笑)(笑)。

仕方ないので、この辺りは、クラスメソッドを作成して、参照変数を断ち切ることにしました。(笑)

あれ？きちんと動いているのに、月が一つ前の月を表示している？

なぜだ？ループも処理もきちんとしているのに、月の表示が前月？になっている？

ブラウザで、new Date()の値を確認すると！変数には、下記が入っています。
- let dat = new Date();
  - Mon Mar 08 2021 16:49:53 GMT+0900 (東京 (標準時))
月を表示したいので、dat.getMonth()を行うと、結果は！
- let month = dat.Month();
  - 2
  - え、今は、３月よwwｗ^^;

これは、だだ、よくJS(JavaScript)の仕様を確認していなかったからです。

知っている人は、知っていますが、Month()はゼロから始まるということです。

勿論回避策は！

let month = dat.Month()+1;

となります。

よく、読むことが必要ですね！！

これで完成しました♪

実際に納品を行ったものを違いますが、こんな感じになります。

お客様も、これでOKとの事なので、これで、いいかな！
（拡張性もきちんとありますしね♪）

参考サイト

【JavaScript入門】日付の加算・減算方法まとめ(月またぎ/うるう年)

【jQuery入門】Datepickerの使い方とオプション設定まとめ！

ありがとうございました♪

残っている懸案

分類	懸案	結論	完了
－	現在なし	－	－

これからの懸案一覧

今回のまとめ

JavaScriptでカレンダーを作成しましたが、
JSの日付オブケジュトは、個人的には、よくないですね(笑)
ただ、これで少しは、勉強になったかな(笑)

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	1	2	3	4

日付の入力補助としてのカレンダーの作成（Java）

日付の入力補助としてのカレンダーの作成（Java）

突然の依頼に、.netは止めて、とりあえずJAVA（JS）