【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】画面の縦・横幅を取得して、ボックス要素を中央に配置する方法

Javascriptのアラートウィンドウのようなものを自作したいとき、jQueryを使って画面(ブラウザ)の縦・横幅を取得し、表示させたいボックスを画面の中央に配置する法です。

: 【jQuery】スマートフォン（iPhone, Androidなど）とPCを判定するスクリプト

サイトへのアクセス時に「スマートフォン(iPhine/Android)」と「PC」で処理を切り替えたい場合のjQueryスクリプトです。

: CakePHP2 + jQueryUIでテキストボックスにオートコンプリート（オートサジェスト）機能をつける方法

テキストボックスにオートコンプリート（オートサジェスト）機能を、CakePHP2 + jQueryUI環境で作成したので作り方を備忘録としてポストします。

: 【jQuery】台湾ドル to 日本円コンバータを作ってみた

前回のポストネタであるJSONP取得を使い、台湾ドルの為替レートAPIを利用して ...

: 購入小計を即時計算するためのJavascript

EC系サイトでよくある、購入数フォームに数値を入力し、その小計を即時計算するJa ...

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

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

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

イメージ

デモはこちらから

jsファイルの設置

jQuery UI

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

フォーム部分HTML

HTMLヘッダー

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

デモ

参考にしたサイト様

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

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

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

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

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

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