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

2013/05/19 2018/08/30

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

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

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

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

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

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

イメージ

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

デモはこちらから

jsファイルの設置

jQuery UI

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

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

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

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

フォーム部分HTML

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

<table>
<tr>
<th>生年月日 <span class="required">(*)</span></th>
<td><input type="text" name="birthdayYMD" value="" size="15" id="birthdayYMD" class="bd">  ";■現年齢：<span id="nowAge"></span></td>
</tr>
<tr>
<th>入社年月日 <span class="required">(*)</span></th>
<td><input type="text" name="enterningYMD" size="15" id="enteringYMD" class="ed">  ";■勤続年数：<span id="nowEntering"></span></td>
</tr>
</table>

<table>

<tr>

</tr>

<tr>

<th>入社年月日 <span class="required">(*)</span></th>

</tr>

</table>

HTMLヘッダー

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

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

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

<!-- *** jquery *** -->
<script src="/js/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js" type="text/javascript"></script>

<!-- *** jQuery UI *** -->
<script src="/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery-ui-1.10.3.custom/css/sunny/jquery-ui-1.10.3.custom.min.css" />

<!-- jQuery UI datepicker（日本語ローカライズ）-->
<script src="/js/jquery-ui-1.10.3.custom/development-bundle/ui/i18n/jquery.ui.datepicker-ja.js" type="text/javascript"></script>

<!-- // holidayChk（日本の祝日取得スクリプト）-->
<script src="/js/HolidayChk/HolidayChk.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/js/HolidayChk/HolidayChk.css" />

<-- // 以下は、jQuery UIのdatePickerを拡張し、土日及びholidayChkで取得した祝日の背景色を変更するスクリプト。
    // セレクターに対象のID名を設定して使用してください。-->
<script type="text/javascript">
$(function(){
    $('#birthdayYMD,#enteringYMD').datepicker({
        changeYear: true,
        yearRange: "-100:+0",
        beforeShowDay: function(date) {
            var result;
            var dd = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
            var hName = ktHolidayName(dd);
            if(hName != "") {
                result = [true, "date-holiday", hName];
            } else {
                switch (date.getDay()) {
                    case 0: //日曜日
                        result = [true, "date-holiday"];
                        break;
                    case 6: //土曜日
                        result = [true, "date-saturday"];
                        break;
                    default:
                        result = [true];
                        break;
                }
            }
            return result;
        },
    });
});
</script>

<!-- カレンダーのサイズを縮小 -->
<style>
.ui-datepicker {
    font-size: 90%;
}
</style>

<-- // 以下は、jQuery UIのdatePickerを拡張し、土日及びholidayChkで取得した祝日の背景色を変更するスクリプト。

// セレクターに対象のID名を設定して使用してください。-->

$(function(){

$('#birthdayYMD,#enteringYMD').datepicker({

changeYear: true,

yearRange: "-100:+0",

beforeShowDay: function(date) {

var result;

var dd = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();

var hName = ktHolidayName(dd);

if(hName != "") {

result = [true, "date-holiday", hName];

} else {

switch (date.getDay()) {

case 0: //日曜日

result = [true, "date-holiday"];

break;

case 6: //土曜日

result = [true, "date-saturday"];

break;

default:

result = [true];

break;

}

return result;

});

</script>

<style>

.ui-datepicker {

font-size: 90%;

}

</style>

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

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

<script type="text/javascript">
$(function(){

    $("input").change( function() {
        var cls = $(this).attr("class");

        if ( cls.match(/bd/)  ) {
            birthday_ymd = $('#birthdayYMD').val();
            retBirth = birthday_ymd.split("/");
            y = parseInt(retBirth[0], 10);
            m = parseInt(retBirth[1], 10);
            d = parseInt(retBirth[2], 10);
        } else if ( cls.match(/ed/) ) {
            enterning_ymd = $('#enteringYMD').val();
            retEnter = enterning_ymd.split("/");
            y = parseInt(retEnter[0], 10);
            m = parseInt(retEnter[1], 10);
            d = parseInt(retEnter[2], 10);
        }

        myNow = new Date();    // 現在
        myBirth = new Date( 1970, 0, d );    // 基準日
        myBirth.setTime( myNow.getTime() - myBirth.getTime() );

        // 求めた年月日から基準日を引く
        myYear  = myBirth.getUTCFullYear() - y;
        myMonth = myBirth.getUTCMonth() - ( m - 1 );

        // 月がマイナスなので年から繰り下げ
        if( myMonth < 0 ){
            myYear --;
            myMonth += 12;
        }

        myDate = myBirth.getUTCDate();

        if( cls.match(/bd/) ){
            $('#nowAge').text( myYear+"才 "+myMonth+"ヶ月 "+myDate+"日目" );
        } else if( cls.match(/ed/)) {
            $('#nowEntering').text( myYear+"年 "+myMonth+"ヶ月 "+myDate+"日目" );
        }
    });
});
</script>

$(function(){

$("input").change( function() {

var cls = $(this).attr("class");

if ( cls.match(/bd/) ) {

birthday_ymd = $('#birthdayYMD').val();

retBirth = birthday_ymd.split("/");

y = parseInt(retBirth[0], 10);

m = parseInt(retBirth[1], 10);

d = parseInt(retBirth[2], 10);

} else if ( cls.match(/ed/) ) {

enterning_ymd = $('#enteringYMD').val();

retEnter = enterning_ymd.split("/");

y = parseInt(retEnter[0], 10);

m = parseInt(retEnter[1], 10);

d = parseInt(retEnter[2], 10);

}

myNow = new Date(); // 現在

myBirth = new Date( 1970, 0, d ); // 基準日

myBirth.setTime( myNow.getTime() - myBirth.getTime() );

// 求めた年月日から基準日を引く

myYear = myBirth.getUTCFullYear() - y;

myMonth = myBirth.getUTCMonth() - ( m - 1 );

// 月がマイナスなので年から繰り下げ

if( myMonth < 0 ){

myYear --;

myMonth += 12;

}

myDate = myBirth.getUTCDate();

if( cls.match(/bd/) ){

$('#nowAge').text( myYear+"才 "+myMonth+"ヶ月 "+myDate+"日目" );

} else if( cls.match(/ed/)) {

$('#nowEntering').text( myYear+"年 "+myMonth+"ヶ月 "+myDate+"日目" );

}

});

</script>

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

デモ

参考にしたサイト様

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

: 【JS】複数のフォームに同じ値を入力するスクリプトをjQueryで作ってみた

都道府県別の送料を指定するフォームに一括で同じ数値を入力する場合などを想定したスクリプトを作成したので紹介します。

: スマホアプリでよく見る横から出てくるスライドメニューを実装できるjQueryのプラグイン「Sidr」。

スマホ向けサイトを作成の際、メニューをスマホアプリのように横から出したくなり探しました所、「Sidr」というプラグインを発見。

: 時刻入力の入力補助として便利な「jQuery ClockPick」を使ってみる。

時刻を入力させるフォーム、プルダウンで作っても良かったのですが、ちょっとオシャレ(？)にjQueryの入力補助ライブラリ「ClockPick」を使ってみました。

: 【JS】ラジオボタンでテキストボックスの disabled を制御するスクリプトをjQueryで組んでみた

インプットフォーム入力の際に、近くに置いたラジオボタンで対象フォームの disabled を切り替えるスクリプトを jQuery で組んでみました。

: 【JS】Javascriptで少数を切り上げ、切り捨て、四捨五入などする方法

以前のポスト（ミニロト番号ジェネレータ）でJavascriptにおける「小数点以下の切り上げ方法」を少し紹介しましたが、切り捨て、四捨五入する方法もまとめておきたいと思います。

PREV: jQuery UIのダウンロード方法をまとめてみた。
NEXT: CakePHPで、現在のコントローラー名やアクション名を取得する方法。

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

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

イメージ

デモはこちらから

jsファイルの設置

jQuery UI

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

フォーム部分HTML

HTMLヘッダー

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

デモ

参考にしたサイト様

【DIY】2x4や1x4など、SPF材サイズ早見表 (564,961)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (279,679)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (257,921)

【歴史】江戸幕府歴代将軍一覧 (143,590)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (133,250)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (131,309)