【JS】jQueryUIのカレンダー(Datepicker)から生年月日を選択すると年齢（と経過月)をリアルタイムに表示するスクリプトを組んでみた

生年月日（年/月/日）を選択すると、リアルタイムで年齢と月を表示させるスクリプトが必要になったので、せっかくなので勉強含みで自分で組んでみました。

算出のスクリプトはこちらのサイト様にあったのでそちらをお借りすることにしました。

入力に際し、前回ポストの jQuery UI の Datepicker を使い、分かりやすく、使いやすくしてみます。
あとついでなので、Datepicker に対し

1. 日本語化
2. 祝日判定
3. 土日祝日の背景色を変更する

という事にも挑戦しています。

カレンダーからの日付選択で、通算年月日を表示するスクリプト

イメージ

こんな感じで、フォームにフォーカスすると、カレンダーが表示され、誕生日、入社年月日を選択すると、経過年月日を表示するというものです。

デモはこちらから

jsファイルの設置

jQuery UI

ダウンロードしてきたjQuery UI ファイル群をサーバへアップロード。
今回は【js】フォルダに【jquery-ui-1.10.3.custom】フォルダごとアップしました。

日本の祝日取得スクリプト

日本の祝日取得スクリプトを AddinBox様 よりお借りします。

Javascript版をまるっとコピーして、ファイル名「HolidayChk.js」、文字コード UTF-8 で保存し、/js/HolidayChk/HolidayChk.js にアップロードします。

フォーム部分HTML

フォーム部分のHTMLです。
めちゃ簡単。

[html]

生年月日 (*)	";■現年齢：
入社年月日 (*)	";■勤続年数：

[/html]

HTMLヘッダー

各種 js、css を読み込む部分です。
まずはjQuery、jQuery UI、日本語ローカライズファイル、祝日取得スクリプト を読み込みます。

読み込んだあとに、Datepicker を拡張し、土日祝日セルの背景色を変更するスクリプトを記述します。

こちらを参考にしました。
jQuery UIのDatepickerに祝日判定ロジックを組み込む。 - Office用アプリ・リボンのカスタマイズ情報が満載 - 初心者備忘録

[html]

<-- // 以下は、jQuery UIのdatePickerを拡張し、土日及びholidayChkで取得した祝日の背景色を変更するスクリプト。 // セレクターに対象のID名を設定して使用してください。-->

[/html]

経過年月日を取得するスクリプト

最後に、メインの経過年月を取得し、表示するスクリプト。

[js]

[/js]

以上、スクリプトを含む HTML ファイルを、UTF-8で保存すれば出来上がり。

デモ

参考にしたサイト様

• イヌでもわかるJavaScript講座 - 経過時間(getTime)
• jQuery UI の Datepicker プラグインのカレンダーを日本語化
• AddinBox(祝日マクロ-1)
• jQuery UIのDatepickerに祝日判定ロジックを組み込む。 - Office用アプリ・リボンのカスタマイズ情報が満載 - 初心者備忘録

-Javascript,jQuery
-calendar, Datepicker, jqueryUI, カレンダー, 日付計算, 経過年月数