【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】Javascriptでパラパラ画像表示（制御ボタン付き）を作ってみる

2枚以上の画像をパラパラと切り替えるスクリプトをjavascriptで作ってみましたので、ご紹介。
ごくごく簡単なイメージギャラリーのようなイメージです。

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

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

: jQueryで日数計算をしてみる

娘の百日膳を行うにあたって「誕生日からの100日目っていつなんだ？」というのを調べる機会があったのですが、せっかくなので勉強がてら自分でも組んでみようと思い、日数計算できるスクリプトをjQueryを利用して作ってみたので公開してみたいと思います。

: 【jQuery】3つのプルダウンを連動させるプラグイン『jquery.tgHierSelect』を作ってみた

複数（今回は３つ）のプルダウンメニューを連動させ選択内容を変更させる、いわゆる「連動プルダウン」のプラグインをjQueryで作ってみました。

: jQueryで各国通貨を日本円にするコンバーターを作ってみた。

APIで利用できる通貨をセレクトボックスで選択し、日本円に換算するというスクリプトを作ってみました

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

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

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

イメージ

デモはこちらから

jsファイルの設置

jQuery UI

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

フォーム部分HTML

HTMLヘッダー

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

デモ

参考にしたサイト様

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

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

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

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

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

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