Eyecatch jQuery

Javascript,jQuery

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

2015/08/10

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

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

入力に際し、前回ポストの 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ヘッダー

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

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

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

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

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

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

デモ

デモはこちらから

参考にしたサイト様

-Javascript,jQuery
-, , , , , , , ,