【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, カレンダー, 日付計算, 経過年月数

: 【jQuery】下方へスクロールしたらトップへ戻るボタンを表示して、スムーズにページトップへ帰るスクリプトを組んでみた

下スクロールでふわっと表示させ、クリックすると上部へスルスルっと戻って消えるというスクリプトを組んでみました。戻るボタンもテキストではなく画像にし、ファイル名末尾に「_on」をつけた画像で差し替えも行なっています。

: Javascriptでの配列の作成方法

Javascriptでの配列の作り方を整理します。

: Bootstrap3 + jQueryでラジオボタンの背景色を変更するスクリプト

Bootstrapを使用して作成したラジオボタンの選択アイテムの背景書を変更するスクリプトが必要になったので、備忘録としてポストします。

: jQueryで「ミニロト」番号ジェネレータを作ってみた

JavaScript でランダムな文字列なり数値を作成するのってどうするんだ、と思い調査しました。

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

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

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

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

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

イメージ

デモはこちらから

jsファイルの設置

jQuery UI

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

フォーム部分HTML

HTMLヘッダー

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

デモ

参考にしたサイト様

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

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

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

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

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

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